使用 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() {&nbsp; if (!$(this).data('options')) {&nbsp; &nbsp; $(this).data('options', $('#select2 option').clone());&nbsp; }&nbsp;&nbsp;&nbsp; var category = $(this).find('option:selected').data('category');&nbsp; var options = $(this).data('options').filter(function() {&nbsp; &nbsp; return $(this).data('category') == category;&nbsp; });&nbsp; $('#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">&nbsp; <select name="select1" id="select1">&nbsp; &nbsp; <option data-category="0" value="">-Select-</option>&nbsp; &nbsp; <option data-category="1" value="Cars">Cars</option>&nbsp; &nbsp; <option data-category="2" value="Phones">Phones</option>&nbsp; &nbsp; <option data-category="3" value="Birds">Birds</option>&nbsp; </select>&nbsp; <select name="select2" id="select2">&nbsp; &nbsp; <option data-category="0" value="Cars">-Select-</option>&nbsp; &nbsp; <option data-category="1" value="BMW">BMW</option>&nbsp; &nbsp; <option data-category="1" value="Benz">Benz</option>&nbsp; &nbsp; <option data-category="1" value="Toyota">Toyota</option>&nbsp; &nbsp; <option data-category="2" value="iPhone">iPhone</option>&nbsp; &nbsp; <option data-category="2" value="Samsung">Samsung</option>&nbsp; &nbsp; <option data-category="2" value="Motorola">Motorola</option>&nbsp; &nbsp; <option data-category="3" value="Eagle">Eagle</option>&nbsp; &nbsp; <option data-category="3" value="Hawk">Hawk</option>&nbsp; &nbsp; <option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->&nbsp; </select><br></form>

Answer 2

只需将值从number更改为text即可。例子<option&nbsp;value="Hawk">Hawk</option> <option&nbsp;value="Dove">Dove<option>