【问题标题】:Multiple selections into input box输入框多选
【发布时间】:2013-04-16 10:32:24
【问题描述】:

我有一些国家可供用户选择。它们显示在下拉框中。目前我可以选择一个国家,它会在输入框中填充它,但是我想知道是否有一种方法可以选择多个并将它们放在同一个框中。

数据将从 mysql 数据库中填充

希望我能说清楚。

到目前为止,这是我的代码:

JAVASCRIPT:

<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
  var selObj = document.getElementById('countries');
  var txtTextObj = document.getElementById('txtText');

  var selIndex = selObj.selectedIndex;
  txtTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>

HTML:

<form>
  <p>

</form><select id="countries">
      <option value="val0">Australia</option>
      <option value="val1">England</option>
      <option value="val2">France</option>
      <option value="val3">Italy</option>
      <option value="val4">South Africa</option>
    </select>
    <input type="button" value="Show Index" onclick="showSelected();" />
  </p>
  <p>

    <input type="text" id="txtText" />

    <br />
  </p>
</form>

所以我想要的是,如果你选择澳大利亚,它会在框中显示澳大利亚,然后返回下拉菜单并选择南非,它会将其放入同一个框中:澳大利亚,南非。

谢谢大家

【问题讨论】:

  • 开始,使用多个选项:
  • 你的意思是同时选择它们?
  • if(txtTextObj.value = ''){txtTextObj.value = selObj.options[selIndex].text;} else { txtTextObj.value = txtTextObj.value + ", "+selObj.options[ selIndex].text;}

标签: php javascript html mysql


【解决方案1】:

为什么不将新的选择附加到输入框中已有的文本。

txtTextObj.value += selObj.options[selIndex].text +', ';

【讨论】:

    【解决方案2】:

    使用多选框并命名为数组:

    <select id="countries" multiple="multiple" name="countries[]">
      <option value="val0">Australia</option>
      <option value="val1">England</option>
      <option value="val2">France</option>
      <option value="val3">Italy</option>
      <option value="val4">South Africa</option>
    </select>
    

    现在选择将被视为数组。使用javascript 代码获取选定的值并将其转换为逗号分隔列表并放入input 框中。

    【讨论】:

    • 谢谢,这确实允许我选择多个,我只是不知道如何使用 javascript 获取这些值并将它们放入输入框中。
    【解决方案3】:
      <select id="countries" multiple="multiple">
          <option value="val0">Australia</option>
          <option value="val1">England</option>
          <option value="val2">France</option>
          <option value="val3">Italy</option>
          <option value="val4">South Africa</option>
        </select>
    

    在选择框中使用multiple="multiple" 进行多项选择。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-08-24
      • 2017-06-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多