时间戳

首页 > 解决方案 > 向选择的下拉菜单添加手动输入选项

javascript - 向选择的下拉菜单添加手动输入选项

问题描述

我将 Chosen 插件集成到我的下拉菜单中。我想创建一个功能，如果下拉列表中的选项不适用于某个用户的表单，她或她可以单击“其他”并手动输入他们的响应。基本上，下拉列表中的最后一个选项将显示为“其他”，如果用户单击它，他或她可以创建一个输入。我将如何在代码中的第一个下拉菜单中执行此操作？非常感谢！

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".chosen-select").chosen({
        disable_search_threshold: 4
      });
      function hide() {
        $("#p1").parent().hide();
        $("#p2").parent().hide();
      }
      // call hide AFTER .chosen() has been invoked on the visible elements
      hide();
    });
  </script>

<script>

  function onSelect1(){
    $("#p1").parent().show();
  }

  function onSelect2(){
    $("#p2").parent().show();
  }
</script>


  <style type="text/css">
  .chosen-select {width:200px}
  </style>
</head>
<!-- Do not call hide() on body load -->
<body>
  <table>
    <tr>
      <td onchange="onSelect1()">
        <select  class="chosen-select">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
        </select>
      </td>
      <td onchange="onSelect2()">
        <select class="chosen-select" id="p1" >
          <option value="" disabled selected>Title Status</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td>
        <select class="chosen-select" id="p2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>




</body>

</html>

标签： javascriptjqueryhtmljquery-chosen

解决方案

如果我猜对了，请在下面尝试

<!DOCTYPE html>
<html>

<head>
  <title>Experiment</title>

  <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css">

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>

  <script type="text/javascript">
    $(function() {
      $(".chosen-select").chosen({
        disable_search_threshold: 4
      });
      function hide() {
        $("#p1").parent().hide();
        $("#p2").parent().hide();
      }
      // call hide AFTER .chosen() has been invoked on the visible elements
      hide();
    });
  </script>

<script>

  function onSelect1(el){

    $("#p1").parent().show();
var value = $(el).find('select').val()
if(value == 'other'){
$(el).append('<input type="text" id="txtSelect"/>')
}
else
{
if($('#txtSelect').length>0){
$('#txtSelect').remove();
}
}
  }

  function onSelect2(){
    $("#p2").parent().show();
  }
</script>


  <style type="text/css">
  .chosen-select {width:200px}
  </style>
</head>
<!-- Do not call hide() on body load -->
<body>
  <table>
    <tr>
      <td onchange="onSelect1(this)">
        <select  class="chosen-select">
          <option value="" disabled selected>Title</option>
          <option value="clean">Clean</option>
          <option value="salvage">Salvage</option>
          <option value="rebuilt">Rebuilt</option>
          <option value="other">Other</option>
        </select>
      </td>
      <td onchange="onSelect2()">
        <select class="chosen-select" id="p1" >
          <option value="" disabled selected>Title Status</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
        </select>
      </td>
      <td>
        <select class="chosen-select" id="p2">
          <option value="" disabled selected>Title Stat</option>
          <option value="in hand">In Hand</option>
          <option value="lien">Lien</option>
          <option value="missing">Missing</option>
          <option value="ralph jr.">Missing</option>
          <option value="ralph">Missing</option>
        </select>
      </td>
    </tr>
  </table>




</body>

</html>

推荐阅读