0

我在下面有一个表格，当用户选择一项运动时，它会被动态添加。我已经实现了代码，如果一项运动已经存在，则不能再次添加。我想不通的是，如果用户取消选中一项运动，我希望它从列表和数组中删除，并且用户能够再次添加它。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Item listing</title>
</head>
<body>
 <form action="test.htm" method="get">
    <select name="mylist" id="myList">
      <option id="1">Baseball</option>
      <option id="2">Soccer</option>
      <option id="3">Basketball</option>
      <option id="4">Volleyball</option>
      <option id="5">Hockey</option>
      <option id="6">Football</option>
      <option id="7">Rugby</option>
      </select>
  <br />
  <div id="sList">
  </div>
  <br />
  <input type="submit" value="Submit" />
  </form>
<script type="text/javascript">
    //add item when selected
    //a sport can not be added twice
    var allVals = [];
    $('#myList').change(function () {
        if ($.inArray(this.value, allVals) == -1) {
            allVals.push($(this).val());
            document.getElementById("sList").innerHTML += "<input checked =\"checked\" id=\"wList\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\">" + this.value + "<br />";
        }
    });

    //remove sport when unchecked
    $('#wList').change(function () {
       //???
    });

    //submit should send checked sports

</script>
</body>
</html>
4

1 回答 1

1

以下是您可以从列表中删除项目的方法。请注意，我对您的代码进行了几处更改...我已将复选框 ID 更改为类--ID 必须是唯一的。我在您的复选框周围添加了标签，以使它们更易于访问并使标签可点击。我
在输入后删除了标签。改用 CSS 来简化格式并简化必要的 jQuery。

http://jsfiddle.net/j6G2Y/

//add item when selected
//a sport can not be added twice
var allVals = [];
$('#myList').change(function () {
  if ($.inArray(this.value, allVals) == -1) {
    allVals.push($(this).val());
    document.getElementById("sList").innerHTML += "<label class=\"wList\"><input checked =\"checked\" class=\"wList-chk\" name=\"wList[]\" type=\"checkbox\" value=\"" + this.value + "\"> " + this.value + "</label>";
  }
});

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    $(this).parent('.wList').remove();
  }
});

//submit should send checked sports

您应该能够使用以下内容从数组中删除该项目：

http://jsfiddle.net/j6G2Y/1/

//remove sport when unchecked
$(document).on("change", ".wList-chk", function () {
  if ($(this).attr('checked')) {
    return;
  } else {
    var thisVal = $(this).val();
    var index= $.inArray(thisVal, allVals);

    allVals.splice(index,1); alert(allVals);

    $(this).parent('.wList').remove();
  }
});

我已经留下了一些警报来监控阵列。

于 2013-01-15T20:28:02.103 回答