Question

我使用以下代码根据HTML中的select选项使用jquery显示div。这很好。

但是，如果选择front an back选项，我需要知道如何显示它们？

这是我目前的代码：

JS：

<script language="javascript">
    $(function() {
        $('#Field169').change(function(){
            $('.myDivs').hide();
            $('#' + $(this).val()).show();
        });
    });

</script>

HTML：

<div class="myDivs" id="Front" align="center>Front</div>

<div class="myDivs" id="Back" align="center>Back</div>


<select id="Field169">
<option value="WHAT DO I NEED HERE??">Front and Back</option>
    <option value="Front">Front Only</option>
    <option value="Back">Back Only</option>
</select>

Answer 1

<option value="Front, #Back">Front and Back</option>

Answer 2

如果您按ID引用，则无法执行此操作，但如果您为其提供了具有相同名称的类，并且您的选项值类似于.front和.back那么你的组合选项可以有值value=".front, .back"，选择器可以得到它们。您可能希望将函数更改为：

$($(this).val()).show();

而不是按ID

选择

Answer 3

您可以将值保留为空，然后更改您的jquery：

    $('#Field169').change(function(){
        var selectedValue = $(this).val();
        if (selectedValue === '') {
            $('.myDivs').show();
        } else {
            $('.myDivs').hide();
            $('#' + selectedValue).show();
        }
    });

Example

Answer 4

 $('#Field169').change(function(){
 var getvalue=$(this option: selected).text();
 if(getvalue=='Front and Back')
 {
 $('#front').show();
 $('#back').show();
 }
 });

使用jquery根据选择选项显示2个div？

4 个答案: