Question

I have a select in a form with a button next to it. Below is an unknown quantity of other select fields.

<select class="offer_1 value_source" name="xnamex">
    <option value="">Please Select</option>
    <option value="xxxxxxx">Text</option>
</select>
<button class="copy_select offer_1" type="button" name="Copy" value="">Copy Down</button>
<select class="offer_1" name="xnamex">
    <option value="">Please Select</option>
    <option value="xxxxxxx">Text</option>
</select>
<!-- unknown quantity of selects follow -->

I am grouping the select fields and button together via the class offer_{number}

I want to copy the selected value from the one select with the class value_source to all other selects with the same class (offer_{number}).

Here is my current code:

$(document).ready(function() {
    $('.copy_select').click(function() {
        attr_class = $(this).attr('class');
        attr_class = attr_class.replace('copy_select ', '.');
        $(attr_class).val($(attr_class + ' value_source').val());
        alert(attr_class);
    });
});

All selects remain unselected and my copy_source get reset to unselected.

What am I doing wrong?

Also, how would I check that the select has a value set and throw up an alert() if not?

Many, many thanks for your time 🙂

Answer 1

Not sure what’s wrong with your original example, this does what I think you want to do. That is, when the button is clicked, select the current value from select.offer_1.value_source in all other selects with the class offer_1; and not to selects with the class offer_2 which will be handled with another button.

JavaScript

$('.copy_select').click(function() {
    $selects = $($(this).data('selects'));
    $source = $selects.filter('.value_source');
    $copies = $selects.not('.value_source');
    console.log($selects);
    console.log($source);
    console.log($copies);
    console.log($source.val());
    $copies.val($source.val());
})

HTML

<select class="offer_1 value_source" name="xnamex">
    <option value="">Please Select</option>
    <option value="a">Text</option>
    <option value="b">Foo</option>
    <option value="c">Bar</option>
</select>
<button class="copy_select" data-selects='.offer_1' type="button" name="Copy" value="">Copy Down</button>
<select class="offer_1" name="xnamex">
    <option value="">Please Select</option>
    <option value="a">Text</option>
    <option value="b">Foo</option>
    <option value="c">Bar</option>
</select>

(I’m using a data attribute on the <button> to associate the button with the <select>s because data attributes are awesome and parsing CSS class strings isn’t.)

Obligatory jsFiddle example.