Question

我遇到以下代码问题。我只是试图从我的layout_select2选项中选择的任何值中获取值。

目前，当我选择multi_select，然后来自layout_select2的选项时，由于我加载layout_select1的方式，我最终得到url的第一个值。我需要一个关于如何修复此问题或引用我的<select>对象

的建议

请参阅Demo

HTML

<select id='multi_select' name='multi_select'>
    <option value='bing.com'>Bing.com</option>
    <option value='Google.com'>Google.com</option>
</select>
<select name='layout_select' id='layout_select1'>
    <option value='/images/search?q=windowsphone'>Windows Phone - Images</option>
    <option value='/search?q=android'>Android - Search</option>
</select>
<select name='layout_select2' id='layout_select2'>
    <option value='/search?q=Windows'>Windows - Images</option>
    <option value='/images/search?q=Robots'>Robots - Search</option>
</select>
<input type='button' id='button' value='Click Me' />

的JavaScript

$(document).ready(function () {

$('#button').click(function () {
    var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1').val();
    window.location = url;
});

$('#layout_select1').show();
$('#layout_select2').hide();

$('#multi_select').change(function () {
    if ($('#multi_select option:selected').text() == "Bing.com") {
        $('#layout_select1').fadeIn('slow');
    }
    if ($('#multi_select option:selected').text() == "Google.com") {
        $('#layout_select1').hide();
        $('#layout_select2').fadeIn('slow');

    } else {
        $('#layout_select1').fadeOut('slow');
    }
   });

  });

Answer 1

您可以过滤layout_select元素以使用可见选择的值，如下所示：

$('#layout_select1, #layout_select2').filter(':visible').val();

当你将其与a couple tweaks to your fiddle结合使用时，效果非常好：

$(document).ready(function () {
    $('#button').click(function () {
        var url = 'http://www.' + $('#multi_select').val() + $('#layout_select1, #layout_select2').filter(':visible').val();
        window.location = url;
    });

    $('#layout_select1').show();
    $('#layout_select2').hide();

    $('#multi_select').change(function () {
        if ($('#multi_select option:selected').text() == "Bing.com") {
            $('#layout_select1').fadeIn('slow');
            $('#layout_select2').hide();
        } else {
            $('#layout_select2').fadeIn('slow');
            $('#layout_select1').hide();
        }
    });
});

从多个<select> / <option> </option> </select>获取值的问题

HTML

的JavaScript

1 个答案: