Question

如何阅读所选选项并根据选择显示div：

<select>
    <option value="1">Package 1</option>
    <option value="2">Package 2</option>
    <option value="3">Package 3</option>
    <option value="4">Package 4</option>
    <option value="5">Package 5</option>
    <option value="6">Package 6</option>
</select>

如果您可以查看这个小提琴并将代码集成到其中：http://jsfiddle.net/JVzCt/

Answer 1

如果您还希望在更改选择时更新

JS小提琴：http://jsfiddle.net/DeanWhitehouse/8L5kG/

<select id="myselect">
    <option value=""></option>
        <option value="1">Package 1</option>
        <option value="2">Package 2</option>
        <option value="3">Package 3</option>
        <option value="4">Package 4</option>
        <option value="5">Package 5</option>
        <option value="6">Package 6</option>
    </select>

<div class='output'></div>

    <script>
$('#myselect').change(function(){
            var val = $(this).val();

                $('.output').html('package ' + val);   

        });
</script>

Answer 2

您应该为select元素添加ID。例如：

<select id="optionsPackage" .../>

现在做类似的事情：

var selected = $('#optionsPackage').val();
if(selected=='1')
{
    $('#divID').show(); //or whatever corresponding DIV id 
}

Answer 3

HTML：

<select id="myselect">
        <option value="1">Package 1</option>
        <option value="2">Package 2</option>
        <option value="3">Package 3</option>
        <option value="4">Package 4</option>
        <option value="5">Package 5</option>
        <option value="6">Package 6</option>
    </select>

JS：

value = $( "#myselect" ).val();

Answer 4

$('select').val();

会抓住价值。

然后让我们说你有6个隐藏的div，其ID为＆＃34; Package-X＆＃34;，其中X是一个数字。

您可以这样做：

$('#Package-' + $('select').val()).show();

你不会在你的选择中需要一个ID，因为Icarus建议，但代码将更干净，更好用它，因为没有机会抓住错误的选择元素。

根据下拉选项显示文本

4 个答案: