Jquery: multiple selectboxes, same name....select one item and open in new tab

Question

Hello (best wishes for 2014),

What is working for me now:

Select 1 item in just 1 selectbox and show the result in a new tab (when checkbox is checked).....it works.

Select 1 item in 1 (out of 4) selectboxes (all selectboxes have the same name!), the result won't show up in a new tab........only if I select an item in the 1st selectbox it will appear in a new tab.

HTML CODE:

<select name="selection">
<option value="url1">item 1</option>
<option value="url2">item 2</option>
<option value="url3">item 3</option>
</select>

<select name="selection">
<option value="url4">item 4</option>
<option value="url5">item 5</option>
<option value="url6">item 6</option>
</select>

<select name="selection">
<option value="url7">item 7</option>
<option value="url8">item 8</option>
<option value="url9">item 9</option>
</select>

<select name="selection">
<option value="url10">item 10</option>
<option value="url11">item 11</option>
<option value="url12">item 12</option>
</select>

One checkbox (when checked the selected item should open in new tab):

<input type="checkbox" id="newtab" name="newtab" />

JQUERY CODE :

    $('#selection').on('change', function () {

    top.iframe.location.href = $('#selection').val();

    $('#newtab').click(function() {
        if($('#newtab').is(':checked')){
            window.open($('#selection').val(), '_blank');
        }
    });

});

The first line is set as a default........if checkbox was not set at first, then selected item will still appear in an iframe (with name "iframe"):

top.iframe.location.href = $('#selection').val();

My questions:

• If checkbox is checked the selected item (in case of just one selectbox) will open in a new tab but is also refreshed in the iframe (how do I solve that!!??)

• I have seen in other posts that I should give the selectbox the name "selection[]" in case of multiple selectboxes with the same name, but I can't get this to work.......

• A side effect, probably due to my coding, is also that in Chrome sometimes the selected item is appearing in a new tab (sometimes twice) but often it appears in a new window. In Safari or Firefox only a new tab is opened showing the selected item.

Answer 1

Why are you registering the click handler in each change of your select? Can't you check in the change if it's checked?

For select all your select by name use an attribute equality selector, not by id; and inside the change event function you can refer the current element using this.

Code (I have used an alert just for the demo):

 $('select[name="selection"]').on('change', function () {

     if ($('#newtab').is(':checked')) {
         window.open($('#selection').val(), '_blank');
     } else {
         alert($(this).val())
     }

 });

Demo: http://jsfiddle.net/IrvinDominin/DPMSe/

Answer 2

Change as below.

 $('#selection').on('change', function () {

    top.iframe.location.href = $(this).val();

    $('#newtab').click(function() {
        if($('#newtab').is(':checked')){
            window.open($(this).val(), '_blank');
        }
    });

});

Because $('#selection').val() will only pick up the first. You should use this to point only on the changed dropdown.