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

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

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

我不知道如何使用 jquery

4

5 回答 5

0

我希望这段代码对你有所帮助....它已检查

            <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>
于 2013-05-21T08:08:18.910 回答
0

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
    }
});
于 2014-04-10T11:19:09.797 回答
0

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

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

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

        ...

        default: {
            break;
        }
    }

    return color;
})
于 2013-05-21T07:14:10.937 回答
0

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

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

这是JSFiddle。

于 2013-05-21T07:17:47.140 回答
0

反之亦然：select1 和 select3 将相互改变。2 和 4 相同。我在选择中添加了一些类。

        <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 将更改 select 1 并且 select 4 更改 select2 然后只需删除两个 else if 语句。

于 2013-05-21T07:49:24.587 回答