Jquery动态添加下拉列表并在取消选中时将其删除_Jquery_Html_Forms

Jquery动态添加下拉列表并在取消选中时将其删除

jquery html forms

Jquery动态添加下拉列表并在取消选中时将其删除,jquery,html,forms,Jquery,Html,Forms,我在下面有一个表单，当用户选择一项运动时，它会被动态添加。我已经实现了代码，如果一项运动已经存在，就不能再添加。我不知道的是，如果用户取消选中某项运动，我希望将其从列表和阵列中删除，然后用户可以再次添加它 <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <

我在下面有一个表单，当用户选择一项运动时，它会被动态添加。我已经实现了代码，如果一项运动已经存在，就不能再添加。我不知道的是，如果用户取消选中某项运动，我希望将其从列表和阵列中删除，然后用户可以再次添加它

<!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>


物品清单
棒球
足球
篮球
排球
曲棍球
足球
橄榄球




//选择后添加项目
//一项运动不能增加两次
var-allVals=[]；
$（'#myList'）。更改（函数（）{
if（$.inArray（this.value，allVals）=-1）{
allVals.push（$（this.val（））；
document.getElementById（“sList”）.innerHTML+=“”+this.value+“
”；
}
});
//取消选中时删除“运动”
$（'#wList'）。更改（函数（）{
//???
});
//提交应发送检查过的运动

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

我留下了一些警报以监视阵列。

请参阅@Cyborgx37，您希望他在那里看到什么？@gdoron几个用于从DOM中删除元素的函数。另请参阅是否可以访问动态添加的复选框？一个简单的测试没有返回任何内容：`$（'#wList'）.change（函数（）{alert（“test”）}）`干得好。唯一的问题是IE现在出了问题。值字段未显示在IE 8中，项目被多次相加。通过将this.value替换为$（this.val（），修复了此问题。任何人都关心解释差异。

//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

//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();
  }
});