Question

我将选择的插件集成到了下拉菜单中。我想创建一个功能，如果下拉菜单中的选项不适用于特定用户的表单，则她或她可以单击“其他”并手动键入他们的回复。基本上，下拉菜单中的最后一个选项将显示为“其他”，如果用户单击它，则可以创建输入。在代码中的第一个下拉列表中，我将如何做？非常感谢！

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

Answer 1

如果我没错，请尝试以下

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

在选择的下拉菜单中添加手动输入选项

1 个答案: