Question

我希望有一个强大的解决方案，它会显示一个下拉菜单，

<select id="sel">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
</select>

用户选择一个选项后，他应该看到相关的文本框。（我知道一个解决方案并且有效）。

但是，我需要一个底部的按钮，当点击时，用户必须看到下拉菜单，选择任何选项并查看相关的文本框等等。

任何帮助都非常（非常多）受到赞赏..

jquery代码

$(function() {
    //This hides all initial textboxes
    $('label').hide();
    $('#sel').change(function() {
        //This saves some time by caching the jquery value
        var val = $(this).val();
        //this hides any boxes that the previous selection might have left open
        $('label').hide();
        //This just opens the ones we want based off the selection
        switch (val){
            case 'option1':
            case 'option4':
            case 'other':
                $('#label1').show();
                break;
            case 'option2':
                $('#label1').show();
                $('#label2').show();
                $('#label3').show();
                break;
            case 'option3':
                $('#label1').show();
                $('#label2').show();
                break;        }
    });

Answer 1

请尝试以下操作：See this fiddle

将以下代码放在head section

中

<script type="text/javascript">
 $(document).ready(function() {

$('#discountselection').hide();
$('#Yes').click(function() {
$('#discountselection').show();
$('#discountselection').removeAttr('disabled');
});
});
</script>
<script type="text/javascript">  
       $(function() {
 //This hides all initial textboxes
  $('label').hide();
 $('#discountselection').change(function() {
    //This saves some time by caching the jquery value
    var val = $(this).val();
    //this hides any boxes that the previous selection might have left open
    $('label').hide();
    //This just opens the ones we want based off the selection
    switch (val){
        case 'option1':
        case 'option4':
        case 'other':
            $('#label1').show();
            break;
        case 'option2':
            $('#label2').show();

            break;
        case 'option3':
            $('#label3').show();

            break;        }
});
//I'm not really sure why these are here
$("input")
.focus(function () {
    $(this).next("span").fadeIn(1000);
})
.blur(function () {
     $(this).next("span").fadeOut(1000);
});
});

    </script>

将以下代码放入body section

<table>
        <tr>
            <td colspan="4">

   <select class="purple" name="discountselection" id="discountselection" disabled>

     <option value="_">- select -</option>
     <option value="option1">put your data here</option>
        <option value="option2">put your data here</option>
        <option value="option3">put your data here</option>
    </select>        
          <br />  <br />        
                <input name="discount" type="button" id="Yes" value="click here to show drop down" />
                  <label id="label1" for="option1">
    //  1st text box
        <input type="text" id="option1" />
    </label>
    <label id="label2" for="option2">

      //2nd text box
        <input type="text" id="option2"/>
    </label>
    <label id="label3" for="option3">
       //3rd text box
        <input type="text" id="option3" />
    </label>

    </td>

        </tr>
    </table>

希望它有所帮助!!

Answer 2

试试这个小提琴。 http://jsfiddle.net/Hz9vF/

显示文本框到期选项，并添加新的div

2 个答案: