如何将选定的选项从多选发送到加载 ajax 调用答案

【问题标题】：How to send the selected options from a multiselect to a load ajax call如何将选定的选项从多选发送到加载 ajax 调用
【发布时间】：2015-03-22 11:32:34
【问题描述】：

我从 eric hanes 那里得到了不错的插件......来自这个网站：

http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

我希望值从选择选项中的选定复选框中获得警报...

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="assets/style.css" />
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/prettify.js"></script>
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
    $("select").multiselect();
});
</script>
</head>
<body id="test">

<p>
    <select title="Basic example" multiple="multiple" name="example-basic" size="5">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
    <option value="option8">Option 8</option>
    <option value="option9">Option 9</option>
    <option value="option10">Option 10</option>
    <option value="option11">Option 11</option>
    <option value="option12">Option 12</option>
    </select>
</p>

<button onclick="check_count()"> click </button>

</body>
</html>

例如：如果我选择选项 1 和选项 2，我应该得到选项 1 的警报和第二个警报选项 2..

更多帮助...现在这些值必须传递给 ajax 调用，并且 ajax 变量必须是动态的... 我正在使用 load() ajax 函数..

$("#fetch").load("select.php",{var1:var1,var2:var2......},function(){});

这里如何在ajax调用中动态传递复选框变量。

<?php 

$var1= $_POST['var1'];
$var2 = $_POST['var2'];
.
.
.


echo $var1;
echo $var2;

?>

【问题讨论】：

标签： javascript jquery html select checkbox

【解决方案1】：

Try this :-

$('select').change(function () {
  alert($('select option:selected').text());
});

【讨论】：

谢谢...我已经更改了我的代码..你能告诉我...点击按钮后..如何将变量动态传递给 ajax 调用...作为 ajax 加载() 函数要求只有选定的变量可以通过..但我想通过选定的复选框传递 ajax 调用变量....如果您有疑问，请检查代码...我已经编辑...
你的意思是你想在按钮点击时进行ajax调用并将选中的复选框数据传递给服务器？如果我错了，请纠正我。
是的，点击按钮并将复选框值发送到服务器......你说对了，但复选框是可变的，我的意思是它取决于用户输入它的更改有时 10 ，或者24 或 8 或 15 ...如果你不明白请问我会解释正确的问题...
我不明白这个10 or 24 or 8 or 15 部分？

【解决方案2】：

var alertOptions='';
$("select").multiselect({
   click: function(event, ui){
      alertOptions+=ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked');

      $callback.text(alertOptions);
      alert(alertOptions);

   }});

【讨论】：

【解决方案3】：

更改此代码

<script type="text/javascript">
$(function(){
    $("select").multiselect();
});
</script>

到这里

<script type="text/javascript">
$(function(){
    $("select").multiselect({
   click: function(event, ui){
      alert(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
   }
    });
});
</script>

【讨论】：

【解决方案4】：

计数$('select option:selected') 就像 Tushar Raj 提到的那样要么如果您使用 jQuery，只需运行 $('select').val() 即可获取值数组。

【讨论】：

谢谢...我已经更改了我的代码..你能告诉我...点击按钮后..如何将变量动态传递给 ajax 调用...作为 ajax 加载() 函数只需要选定的变量可以通过..但我想通过选定的复选框传递 ajax 调用变量....如果您有疑问，请检查代码...我已经编辑了代码...跨度>

【解决方案5】：

遍历选定的选项，创建一个 JSON 并发送它：

 $('#idFromYourComponent').load("YourURL",createJSON(),function(){});

function createJSON() {
        jsonObj = {};
        $('select').multiselect("widget").find("input:checked").each(function(i) {

            var value = $(this).val();

            item = 'option'+i        

            jsonObj[item]=value;
        });

        return jsonObj;
    }

【讨论】：

它不工作...？请帮助如何将选定的变量传递给ajax调用，即...load() ajax函数...动态...