Question

这是从我在网站上提出的另一个问题借来的，但是会非常混乱。

因此，使用其中一个回复者的一些代码，我如何让这段代码工作......或者我完全错了。

选择选项：

<select style="width: 220px; display: none;" id="speedB" name="category">
    <option value=""<?if ($category == ""){?> selected="selected"<?}?>>Please Select</option>
    <option value="1"<?if ($category == "1"){?> selected="selected"<?}?>>Pest Inspectors</option>
    <option value="3"<?if ($category == "3"){?> selected="selected"<?}?>>Building Inspectors</option>
    <option value="2"<?if ($category == "2"){?> selected="selected"<?}?>>Removalists</option>
    <option value="5"<?if ($category == "5"){?> selected="selected"<?}?>>Conveyancing</option>
    <option value="4"<?if ($category == "4"){?> selected="selected"<?}?>>Pool Inspectors</option>
</select>

JavaScript的：

$('#speedB').change(function() {
                      var myTypes = {
                        '': '.nothing',
                        '1': '.pest',
                        '2': '.build',
                        '3': '.removals',
                        '4': '.legal',
                        '5': '.pool'
                      }
                      var selectedType = myTypes[$(this).val()];
                      $('#topright').html('<div class="'+selectedType+'"/></div>');
                    });

HTML：

<div id="topright"></div>

CSS：

#topright {
height: 70px;
position: absolute;
right: 0;
top: 0;
width: 70px;
}
.pest {
background: url("images/pestcorner.png") no-repeat scroll 0 0 transparent;
}
.build {
background: url("images/buildcorner.png") no-repeat scroll 0 0 transparent;
}
.removals {
background: url("images/removalscorner.png") no-repeat scroll 0 0 transparent;
}
.legal {
background: url("images/legalcorner.png") no-repeat scroll 0 0 transparent;
}
.pool {
background: url("images/poolcorner.png") no-repeat scroll 0 0 transparent;
}

基本上，我希望用户从选择框中选择，然后调用css类的显示。

我想我搞砸了js。

Answer 1

我这样做：

首先，为每个选项添加具有相应类名的HTML数据属性：

<select style="width: 220px; display: none;" id="speedB" name="category">
    <option data-class="nothing" value=""<?if ($category == ""){?> selected="selected"<?}?>>Please Select</option>
    <option data-class="pest" value="1"<?if ($category == "1"){?> selected="selected"<?}?>>Pest Inspectors</option>
    <option data-class="build" value="3"<?if ($category == "3"){?> selected="selected"<?}?>>Building Inspectors</option>
    <option data-class="removals" value="2"<?if ($category == "2"){?> selected="selected"<?}?>>Removalists</option>
    <option data-class="legal" value="5"<?if ($category == "5"){?> selected="selected"<?}?>>Conveyancing</option>
    <option data-class="pool" value="4"<?if ($category == "4"){?> selected="selected"<?}?>>Pool Inspectors</option>
</select>

这样，CSS类和所选选项之间的关系非常突出。然后你可以这样做：

$('#speedB').change(function() {
    $('#topright').html('<div class="'+$(this).find(":selected").data("class")+'"/></div>');
});

除此之外，您自己获得了解决方案（在要添加的类的名称中添加了额外的“。”）。

Answer 2

你可以使用像Mootools这样的JS框架轻松地完成这项工作。在Mootools中，你所要做的只是selectBox.addEvent('selected', function(target) { target.swapStyle(newStyle); } );。

Answer 3

我测试了你的代码并且它正在运行。问题不在代码中，而是存在编程逻辑问题。

要解决这个逻辑问题，我认为您唯一需要做的就是从此更改“myType”数组：

var myTypes = {
    '': '.nothing',
    '1': '.pest',
    '2': '.build',
    '3': '.removals',
    '4': '.legal',
    '5': '.pool' }

对此：

var myTypes = {
    '': '.nothing',
    '1': 'pest',
    '2': 'build',
    '3': 'removals',
    '4': 'legal',
    '5': 'pool'
}

因为它将是“class”属性的值，所以在类名之前不需要DOT。

根据select选项更新div类

3 个答案: