在选择选项的onchange function（）中传递多个名称

Question

I'm trying to pass multiple text in select option. I tried many examples here but none work. where i am wrong? Below is my code

<select name="region" id="region" class="region" onchange="change_pack();">
        <option selected="selected" value="'Base','abs','Ram'">North</option>
        <option value="'Base','noabs','Sita'">South</option>
</select>

below is my script

function change_pack(pack, table, name){
    $.ajax({
      type: "POST",
      url: "extra/plan.php",
      data: "name="+name+"&tble="+table+"&pack="+pack,
      cache: false,
      success: function(response){
        //alert(response);return false;
        $("#plan").html(response);
      }
   });
}

Answer 1

Input values are usually strings so you need to split the string into your values

<select name="region" id="region" class="region" onchange="change_pack(this.value);">
        <option selected="selected" value="'Base','abs','Ram'">North</option>
        <option value="'Base','noabs','Sita'">South</option>
</select>

js:

function change_pack(data)
{
    var [pack, table, name] = data.split(",");
    $.ajax({
    type: "POST",
    url: "extra/plan.php",
    data: "name="+name+"&tble="+table+"&pack="+pack,
    cache: false,
    success: function(response)
        {
            //alert(response);return false;
            $("#plan").html(response);
        }
        });
}

Answer 2

You can pass comma sepearated values in ajax:

HTML:

<select name="region" id="region" class="region" onchange="change_pack(this);">
        <option selected="selected" value="'Base','abs','Ram'">North</option>
        <option value="'Base','noabs','Sita'">South</option>
</select>

JS

function change_pack(data)
{ 

  var selectedval = $(data).val();
  var [pack, table, name] = selectedval.split(",");
    $.ajax({
    type: "POST",
    url: "extra/plan.php",
    data: "name="+name+"&tble="+table+"&pack="+pack,
    cache: false,
    success: function(response)
        {
            //alert(response);return false;
            $("#plan").html(response);
        }
  });
}

DEMO: https://codepen.io/creativedev/pen/aKaVBX

Answer 3

option can have one value assigned. You can set it as a key of your additional object that may store extra data:

<select name="region" id="region" class="region" onchange="change_pack();">
  <option selected="selected" value="north">North</option>
  <option value="south">South</option>
</select>

JS:

var values = {
  north: {
    name: 'Base',
    table: 'abs',
    pack: 'Ram'
  },
  ...
}

function change_pack(value) {
  var data = values[value];
  // if `north` will be selected, data will contain:
  // { name: 'Base', table: 'abs', pack: 'Ram' }
}

Answer 4

You may try using form serialize of ajax to get all form data and pass it to back end " https://api.jquery.com/serialize/ "

https://jsfiddle.net/sjhu1nt5/13/

    <form>
    <select name="region" id="region" class="region" >
            <option selected="selected" value="'Base','abs','Ram'">North</option>
            <option value="'Base','noabs','Sita'">South</option>
    </select>

    </form>

    <div id="results">

    </div>
<script>
$( document ).ready(function() {
    $( "select" ).on( "change", change_pack );
});

    function change_pack(pack, table, name){
        // directly get all the data of form in str.
        var str = $( "form" ).serialize();
        $("#results").html(str);
        $.ajax({
          type: "POST",
          url: "extra/plan.php",
          data: "name="+name+"&tble="+table+"&pack="+pack,
          cache: false,
          success: function(response){
            //alert(response);return false;
            $("#plan").html(response);
          }
       });
    }
</script>

Answer 5

 <select name="region" id="region" class="region" onchange="change_pack(this.value);">
        <option selected="selected" value="'Base','abs','Ram'">North</option>
        <option value="'Base','noabs','Sita'">South</option>
</select>
function change_pack(data)
{   

    var [pack, table, name] = data.toString().split(",");

    $.ajax({
    type: "POST",
    url: "extra/plan.php",
    data: "name="+name+"&tble="+table+"&pack="+pack,
    cache: false,
    success: function(response)
        {
            //alert(response);return false;
            $("#plan").html(response);
        }
        });
}