Question

I have a userscript that has to change a whole list of options depending on 1 option in a select. In Opera this script works fine, but not in Chrome (Yes, jQuery is available).

HTML:

<select id="autoConfig-gametype" style="width: 100%;">
    <option value="1" selected="">1. [RECOMMENDED] All latest Game-settings, Paladin, archers, simple tech smithy</option>
    <option value="2">2. No paladin, archers, simple tech system [TWMASTERS Settings]</option>
    <option value="3">3. No paladin, no archers. Packages, 3 lvl tech-system. [CLASSIC]</option>
</select>

<select name="game::tech">
    <option value="0">0: 10 level</option>
    <option value="1">1: 3 level (up to 15)</option>
    <option value="2" selected="selected">2: Simple</option>
</select>

With jQuery I have used attr and prop, but both have no result in Chrome. The select that needs to be manipulated does not change.

jQuery:

$("#autoConfig-gametype").change(function()
{
    var value = $(this).val();

    switch(value)
    {
        case "1":
            // Game > Tech
            $("[name='game::tech'] option").removeProp("selected");
            $("[name='game::tech'] option").removeAttr("selected");
            $("[name='game::tech'] option:eq(0)").attr("selected",true); 
            $("[name='game::tech'] option:eq(0)").prop("selected",true); 
            break;
        case "2":
            // Game > Tech
            $("[name='game::tech'] option").removeProp("selected");
            $("[name='game::tech'] option").removeAttr("selected");
            $("[name='game::tech'] option:eq(1)").attr("selected",true); 
            $("[name='game::tech'] option:eq(1)").prop("selected",true);  
            break;
        case "3":
            // Game > Tech
            $("[name='game::tech'] option").removeProp("selected");
            $("[name='game::tech'] option").removeAttr("selected");
            $("[name='game::tech'] option:eq(2)").attr("selected",true); 
            $("[name='game::tech'] option:eq(2)").prop("selected",true);  
            break;
    }
});

I am kind of stuck here right now, because I am making this script for someone who only uses Chrome.

Answer 1

removeProp and removeAttr were not working, using .prop('property', true/false) works. Please see the fiddle in Chrome.

Fiddle -> http://jsfiddle.net/6bxew/

$("#autoConfig-gametype").change(function()
{
  var value = $(this).val();

  switch(value)
  {
    case "1":
        // Game > Tech
        $("[name='game\:\:tech'] option").prop("selected", false); 
        $("[name='game\:\:tech'] option:eq(0)").prop("selected", true);
        break;
    case "2":
        // Game > Tech
        $("[name='game\:\:tech'] option").prop("selected", false);
        $("[name='game\:\:tech'] option:eq(1)").prop("selected",true);  
        break;
    case "3":
        // Game > Tech
        $("[name='game::tech'] option").prop("selected", false);
        $("[name='game::tech'] option:eq(2)").prop("selected",true);  
        break;
  }
});

​