CODEWITHSUNDEEP
jquerygoogle-chrome
Deep Frozen
Deep Frozen

Reputation: 2075

Programmatically selecting an <option> works in Opera, but not in Chrome

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.

Upvotes: 1

Views: 1135

Answers (2)

Claudio Redi
Claudio Redi

Reputation: 68410

Try with this:

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

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

jsFiddler demo

From removeProp documentation

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

Upvotes: 3

Ohgodwhy
Ohgodwhy

Reputation: 50787

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;
  }
});

​

Upvotes: 2

Related Questions