如何在 jQuery 中将 <select> 标签更改为 <input>

Posted 2023-03-05

【中文标题】如何在 jQuery 中将 <select> 标签更改为 <input>

【英文标题】：How to change <select> tag into <input> in jQuery

【发布时间】：2011-08-12 05:02:44

【问题描述】：

我正在寻找一些 jQuery 代码。

我正在选择

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>

我只想当有人点击“创建你自己的问题”时，这个选择框变成输入框，这样用户就可以轻松定义自己的问题。

请帮我解决这个问题。

谢谢。

【问题讨论】：

按照你的描述去做是个坏主意。如果用户改变主意并想要 select 回来怎么办？

好吧，我知道这一点，所以我会添加一个按钮来改回选择标签

【参考方案1】：

显示文本框解决方案

http://jsfiddle.net/2WB6M/

它不会隐藏选择，而是在选择“新建...”时显示一个文本框。原因与 Jon 在他的评论中的相同。

html：

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>
<input type="text" id="newQuestion"/>

javascript：

$(function() 
    $('#newQuestion').hide();

    $('#questionBox').change(function() 
        if ($(this).val() === 'Create your own question')
            $('#newQuestion').show();
        else
            $('#newQuestion').hide();
    );
);

隐藏选择并创建取消按钮

http://jsfiddle.net/qkhpr/1/

HTML：

<select id="questionBox"  name="questionBox">
      <option selected="selected" value="-">------------------------</option>
      <option value="Create your own question">Create your own question</option>
      <option value="-">------------------------</option>
      <option value="What is your mothers name?">What is your mothers name?</option>
      <option value="What is your fathers name?">What is your fathers name?</option>
      <option value="What is your pet name?">What is your pet name?</option>
</select>
<div id="newQuestion">
    <input type="text"/>
    <button id="cancel">Cancel</button>
</div>

JavaScript：

$(function() 
    $('#newQuestion').hide();

    $('#questionBox').change(function() 
        if ($(this).val() === 'Create your own question') 
            $('#newQuestion').show();
            $('#questionBox').hide();
        
    );

    $('#cancel').click(function () 
        $('#questionBox').show();
        $('#newQuestion').hide();
    );
);

【讨论】：

很好，但您缺少隐藏输入的名称属性