CODEWITHSUNDEEP
javascriptjquery
vo1d
vo1d

Reputation: 3213

jQuery reset all Selectboxes excluding the calling one

i have a form where a user can select timing intervals. But I only want that the could choose only one option. On selecting a value from a dropdown jQuery should reset the other dropdowns. HTML (and php but not relevant):

<select class="span1" name="repeatminute" id="repeatIntervalTiming" onChange="disableOther(this)">
            <?php for($i=0; $i<61;$i++){ echo "<option>$i</option>"; } ?>
            </select>
            minute(s)</label>
              <label>
            <select class="span1" name="repeathour" id="repeatIntervalTiming" onChange="disableOther(this)">
            <?php for($i=0; $i<25;$i++){ echo "<option>$i</option>"; } ?>
            </select>
             hour(s)</label>
            <label>
            <label>
                 <select class="span1" name="repeatday" id="repeatIntervalTiming" onChange="disableOther(this)">
            <?php for($i=0; $i<32;$i++){ echo "<option>$i</option>"; } ?>
            </select>
            day(s)</label>
            <label>
            <select class="span1" name="repeatmonth" id="repeatIntervalTiming" onChange="disableOther(this)">
            <?php for($i=0; $i<13;$i++){ echo "<option>$i</option>"; } ?>
             </select>
             month(s)</label>

Here is my jQuery try:

function disableOther(caller){
    $('#repeatIntervalTiming').each(function(index) {
        if ($(this).text() != caller.textContent){
            $(this).val(0);
        }
    });

Upvotes: 0

Views: 179

Answers (3)

amcdrmtt
amcdrmtt

Reputation: 1253

I removed your onchange-function and added an event in jQuery instead:

$('select').change(function () {
  $('select').not($(this)).val('');
});​​

See a working example here: http://jsfiddle.net/4pqdx/

edit Noticed I had the wrong jsfiddle-link. New one works!

Upvotes: 1

Michal Klouda
Michal Klouda

Reputation: 14521

There is a .not() method in jQuery which removes element(s) from the set of matched elements. 

$('select.span1').change(function() {
    $('select.span1').not($(this)).val('');
});

Documentation here.

PS1: Use unique IDs! I have changed your ID selector to class selector.

PS2: Avoid inline javascript if possible. My example is unobtrussive.

Upvotes: 2

refugene
refugene

Reputation: 383

Firsly you should never have two elements with the same id in the same html document Add the same class on all select boxes and give them all different ids Once all ids on your select boxes are different you can target all except the one you're on with something like:

function disableOther(callerId){
    $('.selectBoxesClass:not('+caqllerId+')').val(0);
});

Upvotes: 0

Related Questions