Question

我正在使用jQuery multiselect api在我的应用程序中选择多个值，但我想要的是，当我点击多选框旁边的按钮时，应该获取所有选定的值。但我无法做到这一点，我在这里发布我的代码。

<link rel="stylesheet" type="text/css" href="http://labs.abeautifulsite.net/archived/jquery-multiSelect/jquery.multiSelect.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/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="http://labs.abeautifulsite.net/archived/jquery-multiSelect/jquery.multiSelect.js">

</script>

<h1>Form Submission Test</h1>

<p>Testing to ensure the correct values are actually passed when the form is submitted.</p>
<select name="region" id="regionHome">
<option value="MDC">MDC</option>
<option value="LAC">LAC</option>
<option value="BRO/WPB">BRO/WPB</option>
<option value="NOE">NOE</option>
<option value="OTHER">OTHER</option>
</select>
<input type="button" value="Search" onclick="searchByDate()" class="searchButton">

<script>
$("#regionHome").multiSelect();

  function searchByDate() {

alert("There are " + $('input[name="regionHome[]"]:checked').length + " boxes selected");
var foo = [];
$('input[name="regionHome[]"]:checked').each(function (i, selected) {
    $( 'div.regionHome' ).replaceWith( "<p>Test</p>" );
    foo[i] = $(selected).val();
    alert(foo[i]);
   });
 }
   </script>

选择以及计数在这里我试图用每个选择显示标签中每个选定值的计数，即，当我将选择一个值时，计数将在标签中更新小提琴在这里

working fiddle

Answer 1

感谢您将链接发布到插件所在的位置。检查后，错误是一个简单的印刷错误。

使用此：

// notice the capital S in multiSelect
$("#regionHome").multiSelect();

而不是：

// all lower case = BAD
$("#regionHome").multiselect();

您可以在此JSFiddle上看到它与您的代码一起使用：http://jsfiddle.net/gbtceq2m/

现在multiSelect正常工作，你需要意识到初始select“不再存在”（不是以同样的方式）。它已被一组模仿多选的复选框所取代。因此，您需要更新选择器以使用这些复选框而不是选择选项：

$('input[name="regionHome[]"]:checked').each(function (i, selected) {
    foo[i] = $(selected).val();
    alert(foo[i]);
});

您可以在此处看到它：http://jsfiddle.net/gbtceq2m/1/

Answer 2

我猜下拉应该允许多项选择？

如果是这样，您必须将multiple属性添加到您的选择下拉列表中，如下所示：

<select class="js-region-list-box" name="region" id="regionHome" multiple="true">
    <option value="MDC">MDC</option>
    <option value="LAC">LAC</option>
    ...
</select>

此外，jQuery提供了.val()方法，可用于从任何表单字段中获取值。

如果是选择框（下拉列表允许多项选择），.val()将返回以逗号分隔的所有选定值

有关val()的更多信息，请here

基于以上信息。

你可以像这样接近它

<强> HTML

<select class="js-region-list-box" name="region" id="regionHome" multiple="true">
    <option value="MDC">MDC</option>
    <option value="LAC">LAC</option>
    <option value="BRO/WPB">BRO/WPB</option>
    <option value="NOE">NOE</option>
    <option value="OTHER">OTHER</option>
</select>
<button class="js-regions">Get Regions</button>

<强> JS

var $regionListBox = $(".js-region-list-box");

$(".js-regions").on("click", function(e) {

    e.preventDefault();

    var selectedRegions = $regionListBox.val();    

    alert(selectedRegions);
});

小提琴链接：http://jsfiddle.net/Varinder/zdb06jp8/

如何在选择框的标签中显示计数选择的值（即选择选项）

2 个答案: