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

Question

由于某些要求，我必须在选择元素的选项标签内使用一个隐藏输入字段。我面临的问题是，当显示所选值时，它会显示前缀 >。

这是我的代码:

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

谁能帮我解决这个问题吗？

Answer 1

正如其他人提到的，这一行:

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

不是有效的 html。您的浏览器正在关闭 optinput™ - 然后会看到一个额外的“>”

你可以做这种事情(未经测试的代码):

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

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

无论您需要设置该隐藏字段的原因是什么 - 在后端代码中执行此操作，即(psuedo)

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

但是你真的需要设置它吗？