CODEWITHSUNDEEP
javascriptjqueryjquery-validate
william
william

Reputation: 606

check options in multiple select boxes

I'm trying to find a way to check my options in different select boxes (total: 4). The boxes include the same data in value/text.

How do I avoid that the option select is the same? (I use it for an sorting feature). And how can i integrate it in the current jquery script. (I use ajax-post to parse data).

This is how it should not be: enter image description here

Select one: 

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

Select two

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

Upvotes: 4

Views: 1317

Answers (5)

William Niu
William Niu

Reputation: 15853

I wonder whether this is what you are after: http://jsfiddle.net/william/K7nTr/.

It checks whether the value has already been selected. If it has, revert to the first value and alert the user.

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

Upvotes: 1

Fabian
Fabian

Reputation: 392

Not sure if i got you right here. But my following example allows each option to be selected only once.

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

Upvotes: 0

Neelam
Neelam

Reputation: 1068

try this

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

Upvotes: 0

roselan
roselan

Reputation: 3775

I'm not sure I understand. in html, replace the onChange

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

in jquery, replace:

    options: function(module){

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

and replace too

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

by 

if( modul.length > 0) {

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

In onchange="$.modules.options('modul1',1);" you dont have to pass modul1, you can just pass this which will point to the changing select box. This applies to both the select boxes. You have few js error in your code, try this.

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

Upvotes: 1

Related Questions