selecting specific options within dropdown in jquery

Question

I was trying to make this small script where you can only use numbers once in a series of dropdown boxes so.. [1] [3] [2] [2] [3] [1] [2] [1] [3] all are fine but not [2] [2] [1] [1] [1] [3] ..

I think I have it half way done.

$("#left").focus(function () {
    // Store the current value on focus, before it changes
    previous = this.value;
}).change(function() {
    // Do soomething with the previous value after the change
    var num1 = $("#left option:selected").text();

    if ( $("#middle option:selected").text() == num1){
    $("#middle option:selected").text(previous)
    }

    if ( $("#right option:selected").text() == num1){
    $("#right option:selected").text(previous)
    }       
});

Here is a link to the full thing: http://jsfiddle.net/U3WSz/

Its works for a little bit but I realized the drop down options started changing. If you play around with it enough, you'll notice what i'm seeing.

I also notice how I repeat a lot of code. Let me know if there's a better way to write it.

Did you look up what .text() does?

Ian
– Ian

2013-03-28 21:59:27 +00:00
Commented Mar 28, 2013 at 21:59 — Ian
– Ian, Commented Mar 28, 2013 at 21:59

Adil Shaikh · Accepted Answer · 2013-03-28 22:28:39Z

1

jsFiddle

add value attribute to option's like this

<option value='2'>2</option>

Js:

   $("#left").focus(function () {
    // Store the current value on focus, before it changes
     previous = $(this).val();

    }).change(function () {
    // Do soomething with the previous value after the change
    var num1 = $("#left option:selected").val();

    if ($("#middle option:selected").val() == num1) {
        // $('body').append(previous);
        $("#middle").val(previous)
    }

    if ($("#right option:selected").val() === num1) {
        $("#right").val(previous);
    }
});

answered Mar 28, 2013 at 22:28

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Over a year ago

Hey... I don't know why but after playing with it, it seems to mess up. Your code makes sense, but it doesn't seem to run it all the time. Try to play with just one box. You'll start seeing it duplicate itself.

Ejaz · Accepted Answer · 2013-03-28 21:58:28Z

0

Try this

$("#left").focus(function () {
    // Store the current value on focus, before it changes
    previous = this.value;
}).change(function() {
    // Do soomething with the previous value after the change
    var num1 = $("#left option:selected").text();

    if ( $("#middle option:selected").text() == num1){
    $("#middle option[value='"+previous+"']").attr('selected','selected')
    }

    if ( $("#right option:selected").text() == num1){
    $("#right option[value='"+previous+"']").attr('selected','selected')
    }       
});

This code makes selected the options, in #middle and #right select boxes, that have value equal to value of previous variable.

answered Mar 28, 2013 at 21:58

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

1 Comment

Ejaz Over a year ago

actually I've just realized that OP doesn't want to evaluate based on options value. No value attribute for <option>. This renders my answer being far from being valid, I think.

Collectives™ on Stack Overflow

selecting specific options within dropdown in jquery

2 Answers 2

jsFiddle

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related