如果下拉列表中沒有使用js/jquery的值，則動態添加文本框。

我是新來的JavaScript和jQuery。我正在編寫一個應用程序，在該應用程序中，用戶可以選擇從美國50個州的下拉菜單中選擇他的狀態，並且在選擇狀態後，他也可以在下拉列表中動態獲得受尊敬的縣。假設我想爲那些不屬於這50個州和縣的人動態插入一個文本框，並且想要進入他們自己的州和縣，那我怎麼用jquery/javascript來做呢？（例如：如果國家不適用，請選擇「其他」，並輸入您的州，縣）如果下拉列表中沒有使用js/jquery的值，則動態添加文本框。

來源

2011-11-27 user1046649

考慮以下幾點：

<select id="selectStates"> 
    <option value="01">Alabama</option> 
    <!-- all other states --> 
    <option value="51">Other</option> 
</select>

而jQuery的：

$('#selectStates').change(
    function(){ 
     if ($(this).val() == 51){ 
      $('<textarea />').attr(
       { 
        'id':'otherState', 
        'name':'otherState' 
      }).insertAfter($(this)); 
     } 
    });

JS Fiddle demo。

這應該足以讓你開始，我想。

參考文獻：

來源

2011-11-27 23:14:46

非常感謝大衛......這一定會讓我開始。 – user1046649

非常好！顯然你非常歡迎問你是否有麻煩。 =） –

我找到了一個解決方案，最初停用了文本框，如果用戶在下拉列表中選擇了「無」或「其他」值，那麼他可以在文本框中輸入。簡單而高效！ – user1046649

爲select元素綁定change事件。在這一變化的事件，你可以做這樣的事情，

$('#selectElementId').change(function(e){ 
    var selectedValue = $(this).val(); 
    if(selectedValue !== 'other'){//Change `other` with whatever value you put on the other option. 
     //show the respected countries 
    } 
    else{ 
     var $div = $('<div/>'); //Creates a div 
     var $label = $('<label/>'); //Creates label 
     $label.html('Enter your state'); 
     var $input = $('<input/>', {id:'otherStateField', type:'text'}); //Creates a text input element with an ID-otherStateField 
     $div.append($label).append($input); // Appends label & input field into the div 
     $(this).after($div); // Appends the div after the select element 
    }

，你可以得到使用otherStateField ID文本元素的值。

來源

2011-11-27 23:16:15

謝謝泰米爾文德漢...將在此工作.. – user1046649

如果下拉列表中沒有使用js/jquery的值，則動態添加文本框。

回答

相關問題