如何改变<；选择>；标记到<；输入>；在jQuery中

我在找一些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>

------------------------
创造你自己的问题
------------------------
你妈妈叫什么名字？
你父亲叫什么名字？
你的昵称是什么？

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

请帮我解决这个问题

---

谢谢。

显示文本框解决方案

它不会隐藏选择，但在选择“新建…”时会显示一个文本框。原因与乔恩的评论相同

HTML:

隐藏选择和创建取消按钮

HTML:

---

照你说的做是个坏主意。如果用户改变主意，想要返回

select

，该怎么办？是的，我知道这一点，所以我会在那里添加一个按钮，以返回到select tagGood，但您缺少隐藏输入的name属性

<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"/>

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

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

<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>

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

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

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