отправить любой текст выбранной опции, используя 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, как и предполагалось, ie. чтобы сохранить значение, которое вы хотите отправить на сервер при отправке формы, и использовать другой метод для группировки элементов 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

Просто измените значение с число на текст .

пример

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

Готово!