如何从HTML中的内部选项中获取隐藏的输入

Question

由于一些要求，我必须在select元素的选项标签内加一个隐藏输入字段。我遇到的问题是，当显示所选值时，它会以前缀>显示。

这是我的代码：

＆＃13;

＆＃13;

<form action="Action.java">
  <select name="cars">
    <option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>
    <option value="car2">CAR2</option>
    <option value="car3">CAR3</option>
  </select>
  <input type="submit" value="Submit">
</form>

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮我解决这个问题吗？

Answer 1

正如其他人所说，这一行：

 <option value="car1" <input type="hidden" id="hidden" value="c1">>CAR1</option>

不是有效的HTML。您的浏览器正在关闭您的optinput™ - 然后看到额外的＆＃39;＆gt;＆＃39;

你可以做这种事（未经测试的代码）：

 <form id="my_select">
   <select name="cars">
     <option value="car1">CAR1</option>
     <option value="car2">CAR2</option>
     <option value="car3">CAR3</option>
   </select>
   <input type="hidden" id="hidden" value="">
   <input type="submit" value="Submit">
</form>

 <script>
 $("#my_select").change(function() {
   var str = "";
   $("select option:selected").each(function() {
    str += $(this).text() + " ";
   });
   $('#hidden').val(str);
 }).change();
 </script>

但是，我不能强调这一点：不要。

无论你需要设置隐藏字段的原因是什么 - 在后端代码中执行此操作，即（伪装）

 if (cars === car1) {
   c1 = true
 }    

但你真的需要设置吗？