javascript - 在多个选择框中选中选项

Question

我试图找到一种方法来检查我在不同选择框中的选项(总计:4)。这些框在值/文本中包含相同的数据。

如何避免选项选择相同？ (我将它用于排序功能)。以及如何将它集成到当前的 jquery 脚本中。 (我使用 ajax-post 来解析数据)。

这是不应该的:

选择一个:

<ul>
<li class="move-img">
<select style="width:150px;"id="modul1" onchange="$.modules.options(this,1);">
<option value="0"></option>
<option value="1">name</option>
<option value="2">name2</option>
</select>
</li>

选择两个

<ul>
<li class="move-img">
<select style="width:150px;"id="modul2" onchange="$.modules.options(this,2);">
<option value="0"></option>
<option value="1">name</option>
<option value="2">name2</option>
</select>
</li>

jQuery

$.modules = {

/*  Get price for option-modules */
options: function(module_id,show_divid){

    var modul = $(module_id).val();

    if(modul != 0){     
        //show price 
        $("#showprice"+show_divid).html('<div class="ajax_loader left"></div>').fadeTo(300,0.25,function(){

            var $show_price = $(this); // div tag

            $.post('/ajax/modules/get_prices/',{check_data:'send_data',get_module_prices_id:modul},function(data){
                $show_price.fadeTo(200,100,function(){

                    $show_price.html(data.module_price);
                });
            },'json');
        });
    }   
}
}

Answer 1

我想知道这是否是您所追求的:http://jsfiddle.net/william/K7nTr/ .

它检查该值是否已被选择。如果有，则恢复为第一个值并提醒用户。

$.modules = {

    /*  Get price for option-modules */
    options: function(module_id, show_divid) {

        var modul = $(module_id).val();

        if (modul != 0) {
            var selector = ".move-img option:selected[value=" + modul + "]";
            if ($(selector).length > 1) { // see if this value has been selected elsewhere
                alert('The value has been selected. Try again');
                $('option:eq(0)', module_id).attr('selected', 'selected');
                return;
            }

            //show price
            $("#showprice" + show_divid).html('<div class="ajax_loader left"></div>').fadeTo(300, 0.25, function() {

                var $show_price = $(this); // div tag
                $.post('/ajax/modules/get_prices/', {
                    check_data: 'send_data',
                    get_module_prices_id: modul
                }, function(data) {
                    $show_price.fadeTo(200, 100, function() {

                        $show_price.html(data.module_price);
                    });
                }, 'json');
            });
        }
    }
}