【问题标题】:How can I put an <input type="text" in a multiple <select>?如何将 <input type="text" 放在多个 <select> 中?
【发布时间】:2015-08-11 09:09:46
【问题描述】:

我正在使用下面的代码在多项选择中获取每个选项旁边的输入文本字段,但我得到的是一团糟。第一个选项在多选中,但其余选项显示在选择列表之外。

有人知道我该怎么做吗?对不起,我不能发布图片。

希望有人能帮忙。

谢谢。

<select name="cars" multiple>
  <option value="audi">Audi</option>
  <input type="text" name="Audi" value""/>
  <option value="bmv">BMV</option>
  <input type="text" name="BMV" value""/>
  <option value="honda">Honda</option>
  <input type="text" name="honda" value""/>
  <option value="peugueot">Peugueot</option>
  <input type="text" name="peugueot" value""/>
  <option value="volkswagen">Volkswagen</option>
  <input type="text" name="volkswagen" value""/>
  <option value="opel">Opel</option>
  <input type="text" name="opel" value""/>
</select>

【问题讨论】:

  • 您不能在选择中放置输入框。这太可怕了,永远不会工作
  • 我认为会的。像... @JoshStevens
  • Audi [text] 所以我可以用数据填充文本字段(在这种情况下是汽车数量)
  • 正如乔希所说,你不能那样做。我想你需要一个解决方法。尝试获取单击选项的值,然后让用户输入与所选值相关的内容
  • 您通常会在选择框中选择您的汽车,然后您可以在下面输入它的值。这是一个很好的用户界面,即使你让它工作,这个用户界面也没有意义..但它永远不会像你尝试的那样工作。 @nessy_ftv

标签: html select text input


【解决方案1】:

做你的下拉列表,然后放一个通用的文本框。在提交操作上,获取计数的值并将其应用于选定的值。

<select name="cars" multiple>
  <option value="audi">Audi</option>
  <option value="bmv">BMV</option>
  <option value="honda">Honda</option>
  <option value="peugueot">Peugueot</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="opel">Opel</option>
</select>
<input type="text" name="Count" value""/>

每次保存只允许 1 个计数。如果您希望能够提交所有模型的计数,请为每种类型使用标签和输入:像这样

<table>
    <tr>
        <td>
            Audi
        </td>
        <td>
            <input type="text" name="audi" value""/>
        </td>     
    </tr>
  <option value="bmv">BMV</option>
    <tr>
        <td>
            BWV
        </td>
        <td>
            <input type="text" name="bmw" value""/>
        </td>     
    </tr>
</table>

【讨论】:

  • 谢谢。它有点接近我想要得到的东西。 @MarcJohnston
  • 如果这对您有用,请指出哪个有效并将其标记为答案。谢谢
猜你喜欢
  • 2011-02-02
  • 1970-01-01
  • 2013-07-07
  • 2013-06-28
  • 1970-01-01
  • 2011-09-09
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多