Question

嗨，我是Javascript和/或Jquery的新手，我正在练习他们的问题是 “使用按钮，动态添加下一个下拉列表中未选择的值的下拉列表，之后如果现有下拉列表中的随机下拉选项的任何值发生更改，并且如果更改（或选定）的值等于已选择的其他下拉列值，则应该从代码中删除整个其他下拉列表。“

我遇到了麻烦，如果我更改其中任何值等于其他下拉值，那么应该从代码中删除整个其他下拉列表，但不会删除该下拉列表。

请帮助。谢谢。

HTML Code ---

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>
<div id="p_scents">
    <p>
    <select class="dropdown" name="ddlFruits1" id="ddlFruits1">
    <option value="m">Mango</option>
    <option value="a">Apple</option>
    <option value="b">Banana</option>
    <option value="o">Orange</option>
    <option value="e">Me</option>
    <option value="y">You</option>
    </select></p>
</div>

Javascript / Jquery Code ---

  $(function() {
    var scntDiv = $('#p_scents');
  var index = $('#p_scents p').size() + 1;

  $('#addScnt').live('click', function() {
    var ddl=  $('<select class="dropdown" name="ddlFruits" id="ddlFruits">\
    <option value="m">Mango</option>\
    <option value="a">Apple</option>\
    <option value="b">Banana</option>\
    <option value="o">Orange</option>\
    <option value="e">Me</option>\
    <option value="y">You</option>\
        </select>');

    ddl.attr("id", "ddlFruits" + index);
        ddl.attr("name", "ddlFruits" + index);

    for(i=1;i<index;i++){
            var selectedValue = $("#ddlFruits"+ i+" option:selected").val();
        ddl.find("option[value = '" + selectedValue + "']").remove();
        }
/* var selectedValue = $("#ddlFruits"+ index+" option:selected").val();
 for(i=1;i<index;i++){
 var d=$("#ddlFruits"+i).clone();
 alert(i+d+selectedValue);
 d.find("option[value = '" + selectedValue + "']").remove();
 $("#ddlFruits"+i).replaceWith($(d));
 }*/

 if ($('#ddlFruits'+(index-1)+ ' option').length == 1) {
    $('#ddlFruits'+index).hide();
    alert("all values finished");
    return false;
}
        index++;

        ($('<p>').appendTo(scntDiv)).append(ddl).append($('<a href="#" id="remScnt">Remove</a></p'));
    });

    $('.dropdown').change(function() {
        dropdownval = $(this).val();
        $('.dropdown').not(this).find('option[value="' + dropdownval +                      '"]').remove();
    });

    $('#remScnt').live('click', function() { 
            if( index > 2 ) {
        $(this).parents('p').remove();
      index--;
        }
        return false;
        });
});

CSS代码---

* { font-family:Arial; }
h2 { padding:0 0 5px 5px; }
h2 a { color: #224f99; }
a { color:#999; text-decoration: none; }
a:hover { color:#802727; }
p { padding:0 0 5px 0; }

input { padding:5px; border:1px solid #999; border-radius:4px; -moz-border-radius:4px; -web-kit-border-radius:4px; -khtml-border-radius:4px; }

Partial Working Demo

Parital Working Demo2

请检查Demo2并建议，谢谢。

Answer 1

以下是如何跟踪所选值，并插入新选择而不使用任何先前选择的值

＆＃13;

$('#addScnt').on('click', function() {
	var clone    = $('#ddlFruits1').clone(true);   // create a clone of the first select
    var values   = clone.find('option').length;    // number of available values
    var p        = $('<p />');                     // create a new paragraph
    var dp       = $('.dropdown');                 // get all selects on the page
    var selected = dp.map(function() {             // map the selected value of the selects
    	return this.value;
    }).get();
    
    clone.attr('id', dp.length + 1)                // increment the ID of the clone
         .attr('name', dp.length + 1)              // and the name
         .find('option').filter(function(_,option) {  // then filter the options based on wether or not
         	return selected.indexOf( option.value ) !== -1; //  their value has already been selected
         }).remove(); // and remove any from the clone that have prevoiusly been selected
    
    if (dp.length < values) // if there are values left to select ..
    	p.append(clone).appendTo('#p_scents'); // add the new select to the paragraph, then to the parent
});

＆＃13;

* {
    font-family: Arial;
}

h2 {
    padding: 0 0 5px 5px;
}

h2 a {
    color: #224f99;
}

a {
    color: #999;
    text-decoration: none;
}

a:hover {
    color: #802727;
}

p {
    padding: 0 0 5px 0;
}

input {
    padding: 5px;
    border: 1px solid #999;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -web-kit-border-radius: 4px;
    -khtml-border-radius: 4px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <select class="dropdown" name="ddlFruits1" id="ddlFruits1">
            <option value="m">Mango</option>
            <option value="a">Apple</option>
            <option value="b">Banana</option>
            <option value="o">Orange</option>
            <option value="e">Me</option>
            <option value="y">You</option>
        </select>
    </p>
</div>

＆＃13;

如果任何下拉值从一组等于其他下拉列表选择值的下拉列表中更改，则应删除整个其他下拉列表

1 个答案: