如何使 HTML 表单的下拉列表中的选定选项之一添加文本输入？

Question

我有以下代码：

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

当用户选择“其他”时，我希望表单在此下拉列表下方显示一个新的输入文本，以便他/她可以输入自己的城市。同样，如果用户在下拉列表中选择现有城市之一，则生成的文本输入将消失。

Answer 1

在选择后添加一个输入并使其显示为无

 <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 和脚本后，您的 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>

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

使用此代码。

这很好。

您使用 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>