Change content of a <select> onclick

Question

I page with a form to buy a t-shirt. There is a list of colors and a is used to display the list of the available size.

My problem is that the sizes will vary depending on which color is chosen. I'm looking for a way to change the content of the when one of the color is chosen.

Here's the form:

<a onclick="document.getElementById('productColor').value='2';" class="colorlink"><img src="BLACK.gif"></a>
<a onclick="document.getElementById('productColor').value='63';" class="colorlink"><img src="BLUE.gif"></a>
<a onclick="document.getElementById('productColor').value='66';" class="colorlink"><img src="GREEN.gif"></a>

<select id="size" name="size">
<option value="2" >SMALL</option>
<option selected value="3" >MEDIUM</option>
<option value="4" >LARGE</option>
<option value="5" >X-LARGE</option>
</select>

<input type="hidden" name="color" id="productColor" value="2"/>

Here's what i want to do:

• When the page is loaded, the box will display the default options above
• If BLUE color is clicked, then only Small and Medium options should be available.
• If GREEN color is clicked, then only Small, Medium and X-Large option should be available
• If BLACK color is clicked, all sizes should be available

Thanks for help !

Answer 1

May be you can add css classes to your options corresponding to the colors, and show/hide them using jQuery when user clicks on the color links.

Note: I've not followed your available size list to the letter, but you get the idea.

<a value="2" class="colorlink" href="#">BLACK</a>
<a value="63" class="colorlink"  href="#">BLUE</a>
<a value="66" class="colorlink" href="#" >GREEN</a>
<br />

<input type="hidden" name="color" id="productColor" value="2"/>

<select id="size" name="size">
<option value="2" class="c2 c63" >SMALL</option>
<option selected value="3" class="c2 c63 c66" >MEDIUM</option>
<option value="4" class="c2">LARGE</option>
<option value="5" class="c2 c63 c66">X-LARGE</option>
</select>​

JavaScript:

$(function() {
    $('.colorlink').click(function() {
        $('#productColor').val($(this).attr('value'));
        $('#size option').hide(); // hide all options
        $('#size option.c' + $(this).attr('value')).show(); // show only the options with class c2, c63, or c66
    });
});​

Here, you show only the options with the corresponding css class.

Check this fiddle for a solution. http://jsfiddle.net/BuddhiP/2BBrD/

Answer 2

You can remove the existing options by using the empty method, and then add your new options:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#size").empty().append(option);

If you have your new options in an object you can ie on BLUE click:

var newOptions = {"Option 1": "Small",
  "Option 2": "Medium"
};

var $el = $("#size");
$el.empty(); // remove old options
$.each(newOptions, function(key, value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

Answer 3

If you are using JQUERY you could catch the click event of colorlink and then modify and refresh the select#size DOM.

$(document).on('click', '.colorlink', function() {
    var v = $(this).val();

Now you could either hide specific select elements based on the val or just create an entire new html select string and assign the new HTML select like so:

$('select#size').html(newhtmlstring).selectmenu("refresh", true);

Answer 4

I think this is a perfect opportunity to use the data attributes

HTML

<a href="#" data-color="2" data-size="3" class="colorlink">Black</a>
<a href="#" data-color="63" data-size="4" class="colorlink">Blue</a>
<a href="#" data-color="66" data-size="5" class="colorlink">Green</a>

jQuery

​$(".colorlink").click(function(){
    var $me = $(this);

    $("#productColor").val($me.data('color'));
    $("#size").val($me.data('size'));

    return false;
});​​​​​​​​​​​​​​

Demo: http://jsfiddle.net/YGAgG/

Answer 5

See : http://jsfiddle.net/eF8w7/1/

HTML:

<a value="2" class="colorlink"><img src="BLACK.gif"></a>
<a value="63" class="colorlink"><img src="BLUE.gif"></a>
<a value="66" class="colorlink"><img src="GREEN.gif"></a>

<select id="size" name="size">
<option value="2" >SMALL</option>
<option selected value="3" >MEDIUM</option>
<option value="4" >LARGE</option>
<option value="5" >X-LARGE</option>
</select>

JS:

$('a').click(function() {
var val = $(this).attr("value");
if (val == "2") {
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>');
}
else if (val == "63") {
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>').append('<option value="5">X-LARGE</option>');
}
else {
    $('#size').empty().append('<option selected="selected" value="2">SMALL</option>').append('<option value="3">MEDIUM</option>').append('<option value="4">LARGE</option>').append('<option value="5">X-LARGE</option>');
}
});​

Answer 6

We can also use following way where we can make the list dynamically into an object, and inject that object into LIST

See working example here FIDDLE

<html>
<script src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.8.2.min.js" ></script>
<body>
<a id="black" href="#">BLACK</a>
<a id="blue" href="#">BLUE</a>
<a id="green" href="#">GREEN</a>

<select id="Cars2" size="3">
<option value="2" >SMALL</option>
<option selected value="3" >MEDIUM</option>
<option value="4" >LARGE</option>
<option value="5" >X-LARGE</option>
</select>


</body>
<script>
var Black = {
    val1 : 'SMALL',
    val2 : 'MEDIUM',
    val3 : 'LARGE',
    val4 : 'X-LARGE'
};

var Blue = {
    val1 : 'SMALL',
    val2 : 'MEDIUM'
};

var Green = {
    val1 : 'SMALL',
    val2 : 'MEDIUM',
    val3 : 'X-LARGE'
};


$('#green').click(function(){
document.getElementById("Cars2").options.length = 0;
$.each(Green, function(val, text) {
    $('#Cars2').append(new Option(text,val));
});
});

$('#blue').click(function(){
document.getElementById("Cars2").options.length = 0;
$.each(Blue, function(val, text) {
    $('#Cars2').append(new Option(text,val));
});
});

$('#black').click(function(){
document.getElementById("Cars2").options.length = 0;
$.each(Black, function(val, text) {
    $('#Cars2').append(new Option(text,val));
});
});

</script>
</html>​