如何通过ajax发送同一个选择框的多个值

Question

I have a select box with multiple select option. I want to send selected values in an array through an AJAX request. How can I select multiple values in the select tag and send all values in an array on click?

<script type="text/javascript">
</script>

<select name="name[]" id="name[]">
  <option>--Select--</option>
  <?php $sql = mysql_query("select * from med_list order by medicine asc");
  while($sha=mysql_fetch_array($sql)) { ?>
    <option style="color:#007F55" value="<?php echo $sha['id']; ?>">
      <?php echo mysql_real_escape_string($sha['medicine']); ?>
    </option>
  <?php } ?>
</select>

$("#submit").click(function() {
  var bac = $("#bacteria").val();
  alert(bac);
});

Answer 1

Check this code

<select id="data" name="data" class="data" multiple="multiple">
<option value="100">foo</option>
<option value="101">bar</option>
<option value="102">bat</option>
<option value="103">baz</option>
</select>

Jquery:

   $(".data").val(["100", "101"]);

Answer 2

Firstly, add multiple attribute in select tag and remove array brackets in id attribute. Second thing, on submit button you've get the value of wrong select box id.

Replace var bac = $("#bacteria").val(); to var bac = $("#name").val();

<select name="name[]" id="name" multiple="multiple">
    <option value="">Select Any Value</option>
    <option value="name1">Name 1</option>
    <option value="name2">Name 2</option>
    <option value="name3">Name 3</option>
    <option value="name4">Name 4</option>
    <option value="name5">Name 5</option>
</select>
<button id="submit">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$("#submit").click(function() {
  var bac = $("#name").val();
  alert(bac);
});
</script>

Answer 3

使用id="name"而不是id="name[]"

<select name="name[]" id="name">

Answer 4

The first is to know that you will sending an array of data, if you use " var bac = $("#bacteria").val();" it will only take the first item and it will pass it.. To send multiple values of same select box by ajax, start by making an array then pass it This is how i did it and it worked

if( $('#bacteria :selected').length > 1){
     var bac = [];
     $('#bac :selected').each(function(i, selected) {
       bac[i] = $(selected).val();
     }); 
    } else {
       var bac = $("#bacteria").val();; 
     }

You can ignore the if statement depending on your php file