Geek Answers Handbook

Test options in multiple select boxes

I am trying to find a way to check my parameters in different blocks of choice (total: 4). Boxes contain the same data in the value / text.

How to avoid the choice of the option being the same? (I use it to sort). And how can I integrate it into the current jquery script. (I use ajax-post for data analysis).

Here's how it should not be: enter image description here

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

Pick 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'); }); } } }
+4
source share
5 answers

Interestingly, this is what you need: http://jsfiddle.net/william/K7nTr/ .

It checks if a value has already been selected. If it is, return to the first value and warn 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'); }); } } }
+1
source

In onchange="$.modules.options('modul1',1);" you do not need to go modul1 , you can just pass this , which points to the changing field of choice. This applies to both selection fields. You have few js errors 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'); }); } }
+1
source

I'm not sure I understand. in html, replace 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{ 

 if( modul.length > 0) {
0
source

try it

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

Not sure I brought you right here. But my next example allows you to select each option 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>
0
source

More articles:


All Articles