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

完成了！