javascript - 下拉选择更短更好的代码

Question

我制作了一个 JSFiddle 只是为了更好地理解我的问题！

所以不需要在这里粘贴代码，一切都在小提琴上可见。生病粘贴JS部分。

JS小提琴

$('select[name="chooseGW"]').change(function(){
if ($(this).val() == "fileiceGW") {
    $('input#fileiceGW').css('display', 'block');
} else {
    $('input#fileiceGW').css('display', 'none');
}

if ($(this).val() == "adworkGW") {
    $('input#adworkGW').css('display', 'block');
} else {
    $('input#adworkGW').css('display', 'none');
}

if ($(this).val() == "cpaleadGW") {
    $('input#cpaleadGW').css('display', 'block');
} else {
    $('input#cpaleadGW').css('display', 'none');
}
});​

好的...所以我的问题是如何使此代码更好并缩短，因为我相信可以肯定...诸如 match data-gateway with specified id 之类的东西...

JSfiddle 中的代码工作得很好，但我相信它的重复太多了。

感谢您的帮助，谢谢！

PS 解释您的缩短代码如何工作以及指定的内容是什么，因此更受赞赏。

Answer 1

最简单的更新是：

$('select[name="chooseGW"]').change(function() {
    var val = $(this).val();
    $('input').hide();
    $('#' + val).show();
});​

JS 小提琴演示。

此版本假定您要input在显示选定元素时隐藏所有其他元素。如果您希望先前显示的input元素保持可见，请省略以 结尾的行hide()：

$('select[name="chooseGW"]').change(function() {
    var val = $(this).val();
    $('#' + val).show();
});​

JS 小提琴演示。

当然，您可以省略创建（或多或少）不必要的变量：

$('select[name="chooseGW"]').change(function() {
    $('input').hide();
    $('#' + $(this).val()).show();
});​

JS 小提琴演示。

参考：

• hide().
• show().
• val().

Answer 2

<select name="chooseGW">
    <option value="noneGW">-- none --</option>
    <option value="fileiceGW">Fileice Gateway</option>
    <option value="adworkGW">Adworkmedia Gateway</option>
    <option value="cpaleadGW">CPALead Gateway</option>
</select>

<div style="display: inline;" >
    <input type="text" id="fileiceGW" style="display: none;" value="fileice()" /> 
    <input type="text" id="adworkGW" style="display: none;" value="adwork()" /> 
    <input type="text" id="cpaleadGW" style="display: none;" value="cpalead()" />
</div>​

var inputs = {
    fileiceGW: "input#fileiceGW",
    adworkGW: "input#adworkGW",
    cpaleadGW: "input#cpaleadGW"
};

$(function () {
    $('select[name="chooseGW"]').change(function () {
        $("input").hide();
        var val = $(this).val();
        var selector = inputs[val];
        $(selector).show();
    });
});

Answer 3

$('select[name="chooseGW"]').on('change', function() {
    $('input').hide();
    if(this.value !== 'noneGW') {
        $('#' + this.value).show();
    }
});

http://jsfiddle.net/f0t0n/tHckA/