Question

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

所以不需要在这里粘贴代码，一切都在小提琴上可见。生病粘贴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');
}
});

好的...所以我的问题是如何使这段代码变得更好和缩短因为我相信它可以肯定......像匹配数据网关那样具有指定ID或者其他东西......

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

感谢您的帮助，谢谢！

P.S。解释你的缩短代码如何工作以及指定的东西是多么受到赞赏。

Answer 1

最简单的更新是：

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

JS Fiddle demo

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

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

JS Fiddle demo

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

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

JS Fiddle demo

参考文献：

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/

下拉选择简短且代码更好

3 个答案: