使用 html 提交所选选项的任何文本

Question

提交表单后，我只能获取分配给该值的数字。我想提交选项之间的任何文本select。例如，当我选择Bird并且Dove我想要接收Bird而Dove不是3并且3$("#select1").change(function() {  if ($(this).data('options') === undefined) {    /*Taking an array of all options-2 and kind of embedding it on the select1*/    $(this).data('options', $('#select2 option').clone());  }  var id = $(this).val();  var options = $(this).data('options').filter('[value=' + id + ']');  $('#select2').html(options);});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><form method="POST" action="process.php">  <select name="select1" id="select1">    <option value="0">-Select-</option>    <option value="1">Cars</option>    <option value="2">Phones</option>    <option value="3">Birds</option>  </select>  <select name="select2" id="select2">    <option value="0">-Select-</option>    <option value="1">BMW</option>    <option value="1">Benz</option>    <option value="1">Toyota</option>    <option value="2">iPhone</option>    <option value="2">Samsung</option>    <option value="2">Motorola</option>    <option value="3">Eagle</option>    <option value="3">Hawk</option>    <option value="3">Dove<option>  </select><br>  <label>Postal code</label>  <input type="number" name="zipcode" placeholder="postal code">  <button>Search</button></form>

Answer 1

提交表单后，value将发送所选选项。问题是因为您使用此值来将子option元素与父元素匹配。

要解决此问题，您需要value按预期使用，即。保存提交表单时要发送到服务器的值，并使用不同的方法option对 之间的元素进行分组select。我建议使用一个data属性来代替，如下所示：

$("#select1").change(function() {

  if (!$(this).data('options')) {

    $(this).data('options', $('#select2 option').clone());

  }

  

  var category = $(this).find('option:selected').data('category');

  var options = $(this).data('options').filter(function() {

    return $(this).data('category') == category;

  });

  $('#select2').html(options);

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form method="POST" action="process.php">

  <select name="select1" id="select1">

    <option data-category="0" value="">-Select-</option>

    <option data-category="1" value="Cars">Cars</option>

    <option data-category="2" value="Phones">Phones</option>

    <option data-category="3" value="Birds">Birds</option>

  </select>

  <select name="select2" id="select2">

    <option data-category="0" value="Cars">-Select-</option>

    <option data-category="1" value="BMW">BMW</option>

    <option data-category="1" value="Benz">Benz</option>

    <option data-category="1" value="Toyota">Toyota</option>

    <option data-category="2" value="iPhone">iPhone</option>

    <option data-category="2" value="Samsung">Samsung</option>

    <option data-category="2" value="Motorola">Motorola</option>

    <option data-category="3" value="Eagle">Eagle</option>

    <option data-category="3" value="Hawk">Hawk</option>

    <option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->

  </select><br>

</form>

Answer 2

只需将值从number更改为text即可。

例子

<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>