可以選擇輸入字段的下拉列表

-1

我試圖在選項中包含，如果用戶選擇/點擊Other please specify選項，他會得到一個選項以提供輸入。這樣輸入的字符將立即在下拉欄中顯示相關國籍。對於基於JavaScript函數的解決方案，我如何在我的html代碼或下拉列表中調用該函數。謝謝！：d可以選擇輸入字段的下拉列表

<div class="form-group"> 
 
<label for="status" class="control-label col-xs-4"> 
 
    <p class="left">Nationality</p> 
 
</label> 
 

 
<select name="status" required> 
 
    <option></option> 
 
    <option value="" disabled selected>Filipino</option> 
 
    <option value='Filipino'>Filipino</option> 
 
    <option value='American'>American</option> 
 
    <option value='Japanese'>Japanese</option> 
 
    <option value='French'>French</option> 
 
    <option value='Sweden'>Sweden</option> 
 
    <option value='other'>Others please specify.</option> 
 
</select> 
 
</div>

來源

2015-09-27 Vista

你忘了分享你的JavaScript ... – rnevius

我的博士還沒有涉及javascript opdown代碼，我猜javascript函數是一個可行的解決方案 – Vista

檢查下面的代碼

var code = $('#code'); //input field 
 
code.hide(); //initially hide 
 

 
$("#status").on('change', function() { 
 
    var selected_option = $('#status option:selected').eq(0); 
 
    if (selected_option.val() == 'other') { 
 
    code.show(); 
 
    code.val(''); //empty the field every-time selecting the option 
 
    console.log(selected_option.val()); 
 
    } else { 
 
    code.hide(); 
 
    } 
 
    console.log(selected_option.val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="status" class="control-label col-xs-4"> 
 
    <p class="left">Nationality</p> 
 
    </label> 
 

 
    <select name="status" id="status" required> 
 
    <option></option> 
 
    <option value="" disabled selected>Filipino</option> 
 
    <option value='Filipino'>Filipino</option> 
 
    <option value='American'>American</option> 
 
    <option value='Japanese'>Japanese</option> 
 
    <option value='French'>French</option> 
 
    <option value='Sweden'>Sweden</option> 
 
    <option value='other'>Others please specify.</option> 
 
    </select> 
 

 
    <input type="text" name="code" id="code" /> 
 
</div>

下面是全面實施

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Nationality</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
</head> 

<body> 
<div class="form-group"> 
    <label for="status" class="control-label col-xs-4"> 
    <p class="left">Nationality</p> 
    </label> 
    <select name="status" id="status" required="required"> 
     <option></option> 
     <option value="" disabled="disabled" selected="selected">Filipino</option> 
     <option value='Filipino'>Filipino</option> 
     <option value='American'>American</option> 
     <option value='Japanese'>Japanese</option> 
     <option value='French'>French</option> 
     <option value='Sweden'>Sweden</option> 
     <option value='other'>Others please specify.</option> 
    </select> 
    <input type="text" name="code" id="code"> 
</div> 
<script> 
var code = $('#code'); //input field 
code.hide(); //initially hide 

$("#status").on('change', function() { 
    var selected_option = $('#status option:selected').eq(0); 
    if (selected_option.val() == 'other') { 
    code.show(); 
    code.val(''); //empty the field every-time selecting the option 
    console.log(selected_option.val()); 
    } else { 
    code.hide(); 
    } 
    console.log(selected_option.val()); 
}); 
</script> 
</body> 
</html>

來源

2015-09-27 02:45:20 jlocker

我將在哪裏插入var代碼函數？ – Vista

@Vista你需要插入''標籤裏面你的html code.make確定要添加** jquery ** – jlocker

當我用我的瀏覽器嘗試它時，它不起作用:(它適用於當我「運行代碼片斷」 – Vista

試試這個：

您需要爲您的select一個listener並採取行動將按照所選值..

var inputLabel = $('#inputLabel'); 
 
var onOptionChange = function() { 
 
    if (this.value == 'other') { 
 
    inputLabel.fadeIn(100); 
 
    } else { 
 
    inputLabel.fadeOut(100); 
 
    } 
 
}; 
 
$('#status').on('change', onOptionChange);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <label for="status" class="control-label col-xs-4">Nationality</label> 
 
    <select name="status" id="status" required> 
 
    <option value="" disabled selected>Select your Nationality</option> 
 
    <option value='Filipino'>Filipino</option> 
 
    <option value='American'>American</option> 
 
    <option value='Japanese'>Japanese</option> 
 
    <option value='French'>French</option> 
 
    <option value='Sweden'>Sweden</option> 
 
    <option value='other'>Others please specify.</option> 
 
    </select> 
 
    <label for="input" id="inputLabel" style="display: none">Other: 
 
    <input type="text" id="input"> 
 
    </label> 
 
</div>

來源

2015-09-27 02:50:00 Rayon

可以選擇輸入字段的下拉列表

回答

相關問題