从多个<选择>/<选项>

Issues getting values from multiple <select>/<option>

本文关键字：gt lt 选项 选择      更新时间：2023-09-26

我对以下代码有问题。我只是想从layout_select2选项中选择的任何选项中获取值。

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

参见演示

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

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

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

当你将其与小提琴的一些调整相结合时，效果非常好：

$(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();
        }
    });
});
相关文章：