Question

我这里有一个小脚本，显示/隐藏某些DIV，具体取决于下拉列表中选择的选项。

List<EventDocument> lsteventDoc = new List<EventDocument>() { 
            new EventDocument{ID1 ="1", ID2=2, FirstName ="", LastName="Test", Number="1"},
            new EventDocument{ID1 ="1", ID2=2, FirstName ="test", LastName="Test", Number="1"},
            new EventDocument{ID1 ="1", ID2=2, FirstName ="", LastName="", Number="1"},
        };
        string SearchFirstName = "test";
        string SearchLastName="Test";
        string SearchNumber="1";
        var query = from b in lsteventDoc
                    where (b.FirstName.Contains(SearchFirstName) && (!string.IsNullOrEmpty(SearchFirstName)))
                    && (b.LastName.Contains(SearchLastName) && (!string.IsNullOrEmpty(SearchLastName)))
                    && (b.Number.Contains(SearchNumber) && (!string.IsNullOrEmpty(SearchNumber)))
                   select b;

此脚本基本上只检查在下拉列表中选择的值（即值=＆＃34; inquiry1＆＃34;），然后使用等于下拉列表的选定值的ID更改DIV的CSS（即ID =＆＃34; inquiry1＆＃34;。）

但是现在上级人员希望将下拉菜单更改为一组无线电按钮，具有相同的功能（如果选择值为＆＃34的无线电按钮;询问1和＃34;选择id为＆＃34的div;询问1＆＃34;也应该改变。

我如何调整上述脚本以适应无线电按钮？

非常重要的是脚本足够灵活，以便将来可以添加更多选项（因此＆＃34; + i＆＃34;东西）

Answer 1

这是一个使用jQuery处理事件的解决方案（因为您使用jquery标记了您的问题）。我已经收录了很多评论，以及足够的HTML和CSS，以便您可以看到正在发生的事情。

注意到它的重要之处在于它没有连接许多不同的事件处理程序，每个事件处理程序都绑定到一个不同的单选按钮和部分，而只是设置一个单独的＆＃34;全球＆＃34;支持所有这些属性的处理程序，使用单选按钮的value属性绑定到要显示或隐藏的文档部分的id属性。

＆＃13;

// Wire up an event handler so that any click on any radio button inside "ul.options" is monitored.
$("ul.options input:radio").on("click", function() {

    // Get the "value" attribute from the radio button that was clicked.
    var chosenOption = $(this).val();
    
    // Hide all of the sections.
    $(".sections > div").hide();
    
    // Now show just the appropriate section for the button that was clicked.
    $("#" + chosenOption).show();
});

// Now simulate a click on the first radio button, so *something* is shown on page load.
$("ul.options input:radio:first").click();

＆＃13;

ul.options {
    display: block:
    margin: 1em 0;
    padding: 0;
}

ul.options li {
    display: inline-block;
    margin: 0 1em;
    padding: 0;
}

.sections {
    display: block;
    border: 1px solid #CCC;
    padding: 1em;
}

.sections > div {
    display: none;    /* Don't show any section by default */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- These are the radio buttons you can click on.  They're wrapped in label elements
     so that you can click either the radio button or the text. -->
<ul class="options">
    <li><label><input type="radio" value="option1" name="inquiry" /> Option 1</label></li>
    <li><label><input type="radio" value="option2" name="inquiry" /> Option 2</label></li>
    <li><label><input type="radio" value="option3" name="inquiry" /> Option 3</label></li>
    <li><label><input type="radio" value="option4" name="inquiry" /> Option 4</label></li>
    <li><label><input type="radio" value="option5" name="inquiry" /> Option 5</label></li>
</ul>

<!-- These are the sections that can be shown.  Their ids must match the values
     for the radio buttons. -->
<div class="sections">
    <div id="option1">Here's some content for option 1</div>
    <div id="option2">Here's some other content for option 2</div>
    <div id="option3">Here's some different content for option 3</div>
    <div id="option4">Here's yet more content for option 4</div>
    <div id="option5">Here's altogether different content for option 5</div>
</div>

＆＃13;

调整脚本以使用无线电而不是选择

1 个答案: