Question

我有一个用户脚本，必须根据select中的1个选项更改整个选项列表。在Opera中，这个脚本运行良好，但不适用于Chrome（是的，jQuery可用）。

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>

使用jQuery我使用了attr和prop，但两者都没有Chrome的结果。需要操作的选择不会改变。

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

我现在有点困在这里，因为我正在为只使用Chrome的人制作这个脚本。

Answer 1

试试这个：

$("#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

来自removeProp文档

注意：请勿使用此方法删除本机属性，例如已选中，已禁用或已选中。这将完全删除属性，一旦删除，就不能再次添加到元素。使用.prop（）将这些属性设置为false。

Answer 2

使用.prop('property', true/false)工作时，

removeProp和removeAttr无法正常工作。请参阅Chrome中的小提琴。

小提琴 - ＆gt; 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;
  }
});

以编程方式选择<选项>适用于Opera，但不适用于Chrome </option>

2 个答案: