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.

Possible duplicate of [Get selected text from a drop-down list (select box) using jQuery](http://stackoverflow.com/questions/1643227/get-selected-text-from-a-drop-down-list-select-box-using-jquery) — kumarharsh, Jan 30 '16 at 05:57
Please see my comments below each suggestion. Still unsolved. It is not at all a duplicate of what you have suggested. — AusTex, Jan 30 '16 at 10:31
it is a simple extension of that question. On change of selection, get the text and execute a function to show the input. — kumarharsh, Jan 30 '16 at 13:51
Actually, I'm sorry, I mixed up the dupe-marking in a hurry. I meant this question: http://stackoverflow.com/questions/12750307/jquery-select-change-event-get-selected-option — kumarharsh, Jan 30 '16 at 13:52

shu · Accepted Answer · 2016-01-30T10:52:10.677

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>

anything to be written in 'onselect' ? also how to define the script tage and where to place it? — AusTex, Jan 30 '16 at 05:23
nothing to be written for "onselect".you should add script tag at end of your html file that is just before
tag — shu, Jan 30 '16 at 07:01
still not working. Text Input does not show up at any time. Thanks for trying though! — AusTex, Jan 30 '16 at 10:07
I copy/pasted pretty much the same code. I can show you on skype or teamviewer if you provide me your contact info. — AusTex, Jan 30 '16 at 10:21

score 1 · Answer 2 · answered Jan 30 '16 at 11:08

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>

score 0 · Answer 3 · answered Jan 30 '16 at 05:08

0

$('#city').live('change', function() {
   var selectedCity = $(this).val();
   if(selectedCity == "other"){
      $('#city').after('<input type="text" id="othercity" name="othercity">');
   }else{
      $('#othercity').remove():
   }
});

answered Jan 30 '16 at 05:08

xstean

160
9

i put your code between right after the html code and ran it but nothing came up. Thanks for trying! – AusTex Jan 30 '16 at 10:17
I asumed you use it into a $(document).ready script, it was obvious for me – xstean Jan 30 '16 at 16:23

Vadivel S · Answer 4 · 2016-01-30T10:00:21.777

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>

no it did not. The text input doesn't hide. Thanks for trying! — AusTex, Jan 30 '16 at 09:58
I can show you on skype or Teamviewer if you provide me your contact info — AusTex, Jan 30 '16 at 10:19
my contact email : vadiveljobs@gmail.com send Teamviewer user Id and Pwd — Vadivel S, Jan 30 '16 at 10:32

score 0 · Answer 5 · answered Jan 30 '16 at 05:54

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">

we can debug very well in js so that i am prefer JS first. – Vasim Shaikh Jan 30 '16 at 05:56 — Vasim Shaikh, Jan 30 '16 at 05:56

How to make one of the selected options in a drop-down list of an HTML form add a text input?

5 Answers5