How to make one of the selected options in a drop-down list of an HTML form add a text input?
Question
I have the following code:
<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>
I would like the form to show a new input text below this drop-down list when user chooses 'other' so that he/she can input his own city. The same way, if the user chooses back one of the existing cities in the drop-down list, the generated text input would disappear.
5 answers
solution1
2 ACCPTED 2016-01-30 05:05:53
Add a input after the select and make it as display none
<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" />
and inside the script tag
<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>
and you also should add Jquery in your html file before the above script tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
after combine the Html and Scripts your html file should look like this
<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>
solution2
1 2016-01-30 11:08:38
Vadivel's fixed code:
<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>
solution3
0 2016-01-30 05:08:40
$('#city').live('change', function() {
var selectedCity = $(this).val();
if(selectedCity == "other"){
$('#city').after('<input type="text" id="othercity" name="othercity">');
}else{
$('#othercity').remove():
}
});
solution4
0 2016-01-30 05:16:57
Use this code .
this is work fine.
You create this type use Jquery or JavaScript functions
<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>
solution5
0 2016-01-30 05:54:30
JavaScript Code:
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 code:
<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">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make a “hybrid” HTML drop-down list that can work as a text box as well?
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
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
Get selected text from a drop-down list using jQuery
Autocopy selected text on drop-down list to clipboard
how to display table shortcode with a drop-down list that depends on the selected option in another drop-down list
How to delete disabled options in a drop-down HTML select list in Drupal 7
How to get “Input” tag value in drop-down options?
Related Tags