Question

我正在尝试创建一个列表，其中用户的选择被附加到按钮的文本中。我使用多选菜单，但我宁愿使用复选框组，因为它对用户来说更容易，更容易访问。该版本无效。

这是我的HTML：

<div>
<label class="legend" for="available">Available</label>
<select id="available" multiple="available">
<option>Number</option>
<option>Author</option>
<option>Category</option>
</select>
<button id="move-available"></button> 
</div>  

<div>
<h2>Selected</h2>
<ul id="selected">
<li><input type="checkbox" id="number" name="selected" value="Number">  <label for="number">Number</label></li>
<li><input type="checkbox" id="author" name="selected" value="Author"><label for="author">Author</label></li>
<li><input type="checkbox" id="category" name="selected" value="Category"><label for="category">Category</label></li>
</ul>   
<button id="move-selected"></button> 
</div>

这是我的jQuery：

function displayAvailable() {
var availableValues = $( "#available" ).val() || [];
$( "#move-available" ).html(
"Move " + availableValues.join( ", " ) + " to selected list");
}   
$( "#available" ).change( displayAvailable );
displayAvailable();

function displaySelected() { 
var selectedValues = $('input[name="selected"]:checked').val() || [];
$( "#move-selected" ).html(
"Move " + selectedValues.join( ", " ) + " to available list");
}
$( "#selected li input" ).change( displaySelected );
displaySelected();

“displaySelected”是无法正常工作的功能。

这是一个小提琴：

https://jsfiddle.net/tactics/htamzbk4/1/

Answer 1

我从

改变了这一行

var selectedValues = $('input[name="selected"]:checked').val() || [];

到

var selectedValues = $('input[name="selected"]:checked').map(function() {return this.value;}).get().join(', ');

也改变了这一行

"Move " + selectedValues.join( ", " ) + " to available list");

到

"Move " + selectedValues + " to available list");

我为你创建了一个工作片段。

＆＃13;

function displayAvailable() {
  var availableValues = $("#available").val() || [];
  $("#move-available").html(
    "Move " + availableValues.join(", ") + " to selected list");

}
$("#available").change(displayAvailable);
displayAvailable();

function displaySelected() {
  var selectedValues = $('input[name="selected"]:checked').map(function() {
    return this.value;
  }).get().join(', ');
  $("#move-selected").html(
    "Move " + selectedValues + " to available list");
}
$("#selected li input").change(displaySelected);
displaySelected();

＆＃13;

.legend,
button {
  display: block
}

div {
  padding: 1em
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label class="legend" for="available">Available</label>
  <select id="available" multiple="available">
  <option>Number</option>
  <option>Author</option>
  <option>Category</option>
</select>
  <button id="move-available"></button>
</div>

<div>
  <h2>Selected</h2>
  <ul id="selected">
    <li><input type="checkbox" id="number" name="selected" value="Number"><label for="number">Number</label></li>
    <li><input type="checkbox" id="author" name="selected" value="Author"><label for="author">Author</label></li>
    <li><input type="checkbox" id="category" name="selected" value="Category"><label for="category">Category</label></li>
  </ul>
  <button id="move-selected"></button>
</div>

＆＃13;

获取已选中复选框的值并使用jQuery附加到按钮文本

1 个答案: