检查多个选择框中的选项

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');
            });
        }
    }
}

Answer 2

在 onchange="$.modules.options('modul1',1);" 中，您不必传递 modul1，只需传递 this > 它将指向正在更改的选择框。这适用于两个选择框。你的代码中有一些js错误，试试这个。

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

我不确定我是否理解。在html中，替换jquery中的onChange

onchange="$.modules.options(this);"

，替换：

    options: function(module){

var modul = $("option:selected", module).val();

并替换

if(modul.length == 0);
    else{

为

if( modul.length > 0) {

Answer 4

试试这个

 var inputs = document.getElementsByTagName("input"); //or document.forms[0].elements;  
   var cbs = []; //will contain all checkboxes  
   var checked = []; //will contain all checked checkboxes  
 for (var i = 0; i < inputs.length; i++) {  
  if (inputs[i].type == "checkbox") {  
   cbs.push(inputs[i]);  
   if (inputs[i].checked) {  
     checked.push(inputs[i]);  
   }  
 }  
}  
var nbCbs = cbs.length; //number of checkboxes  
var nbChecked = checked.length; //number of checked checkboxes  

for(var i=0;i<checked.length;i++)
{
if(checked[i].value=checked[i+1].value)
{
alert('Not allowed');
}
}

Answer 5

不确定我是否在这儿找到你了。
但我的以下示例允许每个选项仅选择一次。

<script language="javascript" type="text/javascript">
    var ValidateOptions = function (module) {
        var selectedValue = $('option:selected', module).attr('value');
        var collectionWithoutCurrent = $('.move-img select').not(module);

        $('option').show();

        collectionWithoutCurrent.each(function () {
            $(this).children('option[value="' + selectedValue + '"]').toggle();
        });
    };
</script>
<ul>
    <li class="move-img">
        <select style="width: 150px;" id="modul1" onchange="ValidateOptions($(this))">
            <option value="0"></option>
            <option value="1">name</option>
            <option value="2">name2</option>
        </select>
    </li>
</ul>
<ul>
    <li class="move-img">
        <select style="width: 150px;" id="modul2" onchange="ValidateOptions($(this))">
            <option value="0"></option>
            <option value="1">name</option>
            <option value="2">name2</option>
        </select>
    </li>
</ul>