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

Question

我正在尝试在选择选项中传递多个文本。 我在这里尝试了很多示例，但是没有用。 我哪里错了？ 下面是我的代码

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

下面是我的剧本

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

输入值通常是字符串，因此您需要将字符串拆分为值

<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

您可以在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);
        }
  });
}

演示： https : //codepen.io/creativedev/pen/aKaVBX

Answer 3

option可以分配一个值。 您可以将其设置为可以存储额外数据的其他对象的键：

<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

您可以尝试使用Ajax的表单序列化获取所有表单数据，并将其传递给后端“ 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);
        }
        });
}