[英]How to make one of the selected options in a drop-down list of an HTML form add a text input?
我有以下代碼：
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
我希望表單在用戶選擇“其他”時在此下拉列表下方顯示新的輸入文本，以便他/她可以輸入自己的城市。 同樣，如果用戶從下拉列表中選擇一個現有城市，則生成的文本輸入將消失。
選擇后添加輸入，使其不顯示
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
並在腳本標簽內
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
並且您還應該在上述腳本標記之前的HTML文件中添加Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
結合HTML和Scripts之后，您的html文件應如下所示
<html>
<body>
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
</body>
</html>
Vadivel的固定代碼：
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').attr('type','hidden');
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('type','text');
}
else
{
$('#city_value').attr('type','hidden');
}
});
});
</script>
$('#city').live('change', function() {
var selectedCity = $(this).val();
if(selectedCity == "other"){
$('#city').after('<input type="text" id="othercity" name="othercity">');
}else{
$('#othercity').remove():
}
});
使用此代碼。
這很好。
您可以使用Jquery或JavaScript函數創建此類型
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id=" " style="">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1" onselect="city(this.val)">city1</option>
<option value="city2" onselect="city(this.val)">city2</option>
<option value="other" onselect="city(this.val)">Other...</option>
</select>
<input type="text" value="" id="city_value" placeholder="Enter City"/>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').hide();
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('required',true);
}
else
{
$('#city_value').attr('required',false);
}
});
});
</script> </body>
JavaScript代碼：
function otherOptionCall()
{
var e = document.getElementById("city");
var einput = document.getElementById("inputother");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 2)
{
einput.style.display="block";
}
else
{
einput.style.display="none";
}
}
HTML代碼：
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="otherOptionCall()">Other...</option>
</select>
<input type="text" name="strother" id="inputother" style="display:none">
如何制作一個“混合” HTML下拉列表，使其也可以用作文本框？
[英]How to make a “hybrid” HTML drop-down list that can work as a text box as well?
如何在不使用php javascript提交的情況下輸出多選下拉列表中所有選定選項的文本
[英]how to output the text of all selected options in a multi select drop-down list without submitting using php javascript
根據另一個選定的下拉列表更改下拉列表中的選項
[英]Change options in a drop-down list depending on another selected drop-down list
使用jQuery從下拉列表中選擇一個值時，將輸入文本設置為只讀
[英]make an input text into read only when one value is selected from drop down list using jquery
在下拉列表中選擇一個選項時，在表的行上顯示輸入文本框
[英]Show input text-box on the row of the table when an option is selected on a drop-down list
如何使用取決於另一個下拉列表中所選選項的下拉列表顯示表格簡碼
[英]how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list
如何在Drupal 7的下拉HTML選擇列表中刪除禁用的選項
[英]How to delete disabled options in a drop-down HTML select list in Drupal 7
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.