如何使用选择向 JavaScript 发送多个值？答案

【问题标题】：How to send more than one value to JavaScript using selection?如何使用选择向 JavaScript 发送多个值？
【发布时间】：2013-07-05 22:31:15
【问题描述】：

我目前正在构建一个小型输入表单，用户将在其中输入业务单位类别下的子类别。在主 php 页面上有一个表格。第一个提示用户通过下拉菜单选择业务单位。我有一个 JS 函数，它获取值，并将其传递到另一个页面，然后提示用户进行另一个选择。用户可以选择添加子类别，或更新现有的子类别。我想使用相同的 onchange 事件来发送第二个下拉列表中的值以及从上一页传递的变量。请参阅下面的代码。

$get_bus=$_GET['bus_id'];
$get_cat=mysql_query("SELECT subcat_id, subcat_name FROM subcategories WHERE bus_id='{$get_bus}' ORDER BY subcat_name ASC");
$dept_count = mysql_num_rows($get_cat);

if($dept_count==true)
{
echo'
<select id="subcat" name="subcat" class="textinput1" style="width:175px; height: 25px;" tabindex="8" onchange="showSubCategoryThree(this.value);" onfocus="showSubCategoryThree(this.value);" >
<option value = "">Select </option>
<option value = "Add">Add Subcategory</option>
<optgroup label="Update Subcategory Name"></optgroup>
';
while(($cat =  mysql_fetch_assoc($get_cat)))
{
    echo '
    <option value="'.$cat['subcat_id'].'">'.$cat['subcat_name'].'</option>
    ';
}
echo '
</select>
</div>
';
}

以下是我当前的 JavaScript 代码。请告知是否可以将 $get_bus 与 this.value 一起发送。

 function showSubCategoryThree(cat_id)
 {
 if (subcat_id=="")
 {
   document.getElementById("DeptContainer").innerHTML="";
   return;
 } 
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for IE6, IE5
   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
 {
   document.getElementById("DeptContainer").innerHTML=xmlhttp.responseText;
 }
 }
 xmlhttp.open("GET","/includes/adminPages/selectCatDept.php?cat_id="+cat_id,true);
 xmlhttp.send();
 }

【问题讨论】：

第一页（顶部）是在我的其他 JS 函数处理了从初始下拉选择中获得的值之后。

标签： php javascript variables selection

【解决方案1】：

我建议构建一个您想在后端使用的变量对象（例如数组）。

我还建议使用 POST 而不是 GET，因为它（出于多种原因，包括在 URL 中轻松操作）更安全（但是，如果没有高 lvl 的 SSL 和某些类型的验证，没有什么是足够安全的）。

我通常使用 jQuery 和 AJAX 来执行此行为，如下所示：

$.ajax(
{
    // Post select to url.
    type : 'post',
    url : 'url/script.php',
    dataType : 'json', // expected returned data format.
    data : 
    {
        'selectedValueOne' : value1, // the variable 1 you're posting.
        'selectedValueTwo' : value2 // the variable 1 you're posting.
    },
    success : function(data)
    {
         // Handle what happens after the success, you CAN parse the data object, if you returned an object to work with.
    },
    complete : function(data)
    {
        // do something, Optional.
    }
});

您可以在没有 jQuery 特定符号的情况下执行此操作。

在后端你可以像这样访问变量：

$var1 = isset($_POST['selectedValueOne']) ? $_POST['selectedValueOne'] : '';
$var2 = isset($_POST['selectedValueTwo']) ? $_POST['selectedValueTwo'] : '';

【讨论】：

【解决方案2】：

没问题，把PHP改成这样：

echo'
<select id="subcat" name="subcat" class="textinput1" style="width:175px; height: 25px;" tabindex="8" onchange="showSubCategoryThree(this.value,'.$get_bus.');" onfocus="showSubCategoryThree(this.value,'.$get_bus.');" >
<option value = "">Select </option>
<option value = "Add">Add Subcategory</option>
<optgroup label="Update Subcategory Name"></optgroup>
';

以及对这个的javascript函数定义：

 function showSubCategoryThree(cat_id, get_bus_value) {

【讨论】：