Question

<select name="form_textcolor1">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select name="form_textcolor2">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select name="form_textcolor3">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select name="form_textcolor4">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>

我有四个选择框，我想在四个选择框中选择两个不同的颜色值，然后给两个选择框的相同颜色值选项剩余。

我的意思是说在第一个选择框中选择红色和第二个粉红色然后选择第3和第4选择框红色和粉红色。

我没有得到如何使用jquery

Answer 1

试试这个（红色的例子）：

$('option').css( 'color', function() {
    var color = '#000000';
    switch ( $(this).attr('value') ) {

        case ('Red'): {
            color = '#ff0000';
            break;
        }

        ...

        default: {
            break;
        }
    }

    return color;
})

Answer 2

我不确定我是否清楚地理解你的问题陈述。如果您正在寻找以下解决方案，请查看。

<select id='select-1'  name="form_textcolor-1">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select id='select-2' name="form_textcolor-2">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select id='select-3' name="form_textcolor-3">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>
<select id='select-4' name="form_textcolor-4">
    <option value="">Select Color</option>
    <option value="Red">Red</option>
    <option value="Pink">Pink</option>
    <option value="Yellow">Yellow</option>
    <option value="Orange">Orange</option>
</select>

<script type="text/javascript">
  $(document).ready(function() {
    var allOptions = ['select-1', 'select-2','select-3','select-4'],
        selectedOptions = [];
    $("select[id^='select-']").change(function(){
        selectedOptions.push($(this).attr('id'));
        allOptions.splice( $.inArray($(this).attr('id'), allOptions), 1 );

        if(selectedOptions.length == 2){
           for(var i = 0; i < selectedOptions.length; i++){
               $("#" + allOptions[i]).val($("#" + selectedOptions[i]).val());
           }
        }
    });
  });
</script>

Here是JSFiddle。

Answer 3

这也可以反过来：select1和select3会相互改变。同样适用于2和4.我在选择中添加了一些classess。祝你好运，度过美好的一天

        <select class="select1" name="form_textcolor">
        <option value="">Select Color</option>
        <option value="Red">Red</option>
        <option value="Pink">Pink</option>
        <option value="Yellow">Yellow</option>
        <option value="Orange">Orange</option>
    </select>
    <select class="select2" name="form_textcolor">
        <option value="">Select Color</option>
        <option value="Red">Red</option>
        <option value="Pink">Pink</option>
        <option value="Yellow">Yellow</option>
        <option value="Orange">Orange</option>
    </select>
    <select class="select3" name="form_textcolor">
        <option value="">Select Color</option>
        <option value="Red">Red</option>
        <option value="Pink">Pink</option>
        <option value="Yellow">Yellow</option>
        <option value="Orange">Orange</option>
    </select>
    <select class="select4" name="form_textcolor">
        <option value="">Select Color</option>
        <option value="Red">Red</option>
        <option value="Pink">Pink</option>
        <option value="Yellow">Yellow</option>
        <option value="Orange">Orange</option>
    </select>

使用Javascript：

            $('select').on('change', function(){
        var value = $('.select1').val(),
            value3 = $('.select3').val();
        if(value) {
            $('.select3').val(value);
        } else if (value3) {
            $('.select1').val(value3);
        }


        var value2 = $('.select2').val(),
            value4 = $('.select4').val();
        if(value2) {
            $('.select4').val(value2);
        } else if (value4) {
            $('.select2').val(value4);
        }
            })

如果您不需要，那么select3将更改选择1并选择4更改select2然后只删除其他if语句。

Answer 4

我希望这段代码可以帮助你....检查

            <script type="text/javascript" src="jquery.js"></script>



        <select name="form_textcolor1">
            <option value="">Select Color</option>
            <option value="Red">Red</option>
            <option value="Pink">Pink</option>
            <option value="Yellow">Yellow</option>
            <option value="Orange">Orange</option>
        </select>
        <select name="form_textcolor2">
            <option value="">Select Color</option>
            <option value="Red">Red</option>
            <option value="Pink">Pink</option>
            <option value="Yellow">Yellow</option>
            <option value="Orange">Orange</option>
        </select>
        <select name="form_textcolor3">
            <option value="">Select Color</option>
            <option value="Red">Red</option>
            <option value="Pink">Pink</option>
            <option value="Yellow">Yellow</option>
            <option value="Orange">Orange</option>
        </select>
        <select name="form_textcolor4">
            <option value="">Select Color</option>
            <option value="Red">Red</option>
            <option value="Pink">Pink</option>
            <option value="Yellow">Yellow</option>
            <option value="Orange">Orange</option>
        </select>
        <button type="submit" onclick="checkColor();" value="submit"></button>
        <script type="text/javascript">
        function checkColor () {
            var a = $("[name=form_textcolor1]").val();
            var b = $("[name=form_textcolor2]").val();
            var c = $("[name=form_textcolor3]").val();
            var d = $("[name=form_textcolor4]").val();
            if(a==b|| a==c||a==d || b==c ||b==d|| c==d)
            {
            if (a==b)
            {
                if (a==c || c==d || a==d )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            if (a==c)
            {
                if (a==b || b==d || a==d )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            if (a==d)
            {
                if (a==b || b==c || a==c )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            if (b==c)
            {
                if (a==b || b==d || a==d )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            if (b==d)
            {
                if (a==b || b==c || a==c )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            if (c==d)
            {
                if (a==b || b==c || a==c )
                {
                    alert("combination incorrect");
                }
                else
                {
                    alert("combination correct");
                }
            }
            }
            else
            {
                alert("combination corect");
            }
        }

        </script>

Answer 5

Fiddle Demo

var select_all = $('select[name^="form_textcolor"]'), //cache selector
    sel_first = select_all.filter(':lt(2)'),//get 1st two select
    sel_last = select_all.filter(':gt(1)');//get last two select
sel_last.prop('disabled', true);//disable last two select
sel_first.change(function () {//attach change function 1st select
    sel_first.find('option').prop('disabled', false); //enable all 1st select options
    sel_first.not(this).find('option[value="' + this.value + '"]').prop('disabled', true); //disable option selected by current in the other 1st select
    $(this).find('option[value="' + sel_first.not(this).val() + '"]').prop('disabled', true); //disable option of current select which is selected by other select
    var selected_sel = sel_first.find('option:selected[value!=""]'); //get selected options whose value is not "" from 1st two selects
    if (selected_sel.length == 2) { //if length of selcted options is 2 from two selects
        var selected_options = selected_sel.map(function () { //get the options selected
            var txt = $(this).text();
            return '<option value="' + txt + '">' + txt + '</option>';
        }).get().join('');
        sel_last.html(selected_options).prop('disabled', false).eq(0).prop('selected', true);//assign it two last two select and enable them
    } else {
        sel_last.prop('disabled', true); //disable last two select if length of selected option from 1st two selects is not 2
    }
});

在四个选择框中选择两个不同的颜色值，并为两个选择选项提供相同的选项

5 个答案: