如何改變<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(); 
    }); 
});