如何改变<select>标签到<input> jQuery中

Question

以及IAM寻找一些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> 

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

请您帮我解决这个问题。

谢谢。

Answer 1

显示文本框的解决方案

http://jsfiddle.net/2WB6M/

它并不隐藏选择，但显示一个文本框时，“新建...”被选中。之所以，是在他的评论一样Jon's。

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(); 
    }); 
});