【问题标题】:select multiple value from drop down list从下拉列表中选择多个值
【发布时间】:2018-12-16 03:24:41
【问题描述】:

如何从下拉列表中选择多个值?,选择该值时,下拉菜单中将不再可用。

[]

我希望能够通过按添加按钮一次选择多个电子邮件地址,我想在其中使用逗号分隔符显示,因此当我们通过下拉列表选择电子邮件地址时,它将自动显示在输入中“收件人”字段,例如:neymar@gmail.com、ronaldo@gmail.com、messi@gmail.com 然后用户还可以通过按删除按钮删除输入中的最后一封电子邮件,

【问题讨论】:

  • 用具体问题更新您的问题。不要使用我可以使用下面的代码并修改它吗?或者有其他更简单的方法吗?自己尝试一下。
  • 为什么不简单地使用

标签: javascript php jquery mysql drop-down-menu


【解决方案1】:

您必须将selectBox 的值连接到上一个值 并将其替换为您的输入框。

     var prv_val,f_val;
        $('#test').change(function() {
          var new_val = $(this).val();
          if(new_val != ""){
            prv_val = $('#target_input').val();
            if(prv_val != ""){
              f_val = prv_val + "," + new_val;
            }
            else {
              f_val = new_val;
            }
            $('#target_input').val(f_val);
          }
        });
#target_input {
     display: block;
      height: 30px;
      margin-top: 20px;
      width : 100%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <select id='test'>
         <option value=""></option>
          <option value="one@gamil.com">one@gamil.com</option>
          <option value="two@gamil.com">two@gamil.com</option>
          <option value="three@gamil.com">three@gamil.com</option>
        </select>

        <input value="" id='target_input'>

【讨论】:

  • 如果用户错误选择选择框如何删除它?
  • 你应该对按钮的点击事件进行编码
【解决方案2】:

如果您使用的是 asp.net 控件,请创建一个列表框。

如果您使用的是 HTML,请添加多个属性。

点击此链接

https://www.w3schools.com/TAGs/att_select_multiple.asp

【讨论】:

    【解决方案3】:

    按住 Ctrl (windows) / Command (Mac) 按钮可选择多个选项。 在您的选择标签内使用多个属性。

    <form action="/action_page.php">
        <select name="cars" multiple>
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
        <input type="submit">
      </form>
    

    【讨论】:

      猜你喜欢
      • 2021-12-14
      • 2016-07-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-04-24
      相关资源
      最近更新 更多