Question

我想在下拉菜单中添加一个按钮（输入类型=“ button”）。我试图添加一个按钮，但是没有用。是否可以添加一个按钮，使其像这样：选择一个选项，单击一个按钮，显示Div？

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">  </script>
<script type="text/javascript">
$(window).load(function(){
$('.drop-down-show-hide').hide();
$('#dropDown, #dropDown2').change(function(){
    $(this).find('option').each(function(){
        $('#'+$(this).val()).hide();
    });   
    $('#' + this.value).show();
});
    });
</script>

<select id="dropDown">
  <option>Select</option>
  <option value="item1">One</option>
  <option value="item2">Two</option>
  <option value="item3">Three</option>
</select>
<input type="button" value="view" target="_self">
<div class="drop-down-show-hide" id="item1">
  <p>First content</p>
</div>
<div class="drop-down-show-hide" id="item2">
  <p>Second content</p>
</div>
<div class="drop-down-show-hide" id="item3">
  <p>Third content</p>
</div>

Answer 1

好的。

诀窍是在全局范围内（在任何函数之外）声明一个变量，并使用它来保存值。

该值将在#dropDown更改时设置...并在#dropDownButton点击时使用。

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">  </script>
<script type="text/javascript">
$(window).load(function(){
  $('.drop-down-show-hide').hide();
  var dropdownValue;
  $('#dropDown').change(function(){
    dropdownValue = $(this).val();
  });
  $('#dropDownButton').click(function(){
    $(".drop-down-show-hide").hide();
    $("#"+dropdownValue).show();
    console.log(dropdownValue);
  });
});
</script>

<select id="dropDown">
  <option>Select</option>
  <option value="item1">One</option>
  <option value="item2">Two</option>
  <option value="item3">Three</option>
</select>
<input id="dropDownButton" type="button" value="view" target="_self">
<div class="drop-down-show-hide" id="item1">
  <p>First content</p>
</div>
<div class="drop-down-show-hide" id="item2">
  <p>Second content</p>
</div>
<div class="drop-down-show-hide" id="item3">
  <p>Third content</p>
</div>

Answer 2

每次select的值更改时，您都可以更改视图按钮的事件处理程序。

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">  </script>
<script type="text/javascript">
$(window).load(function(){
$('.drop-down-show-hide').hide();
$('#dropDown, #dropDown2').change(function(){
    $(this).find('option').each(function(){
        $('#'+$(this).val()).hide();
    });   
    var x = this;
    $('#view').off();
    $('#view').click(function(e){
    $('#' + x.value).show();
    });
});
    });
</script>

<select id="dropDown">
  <option>Select</option>
  <option value="item1">One</option>
  <option value="item2">Two</option>
  <option value="item3">Three</option>
</select>
<input type="button" value="view" target="_self" id='view'>
<div class="drop-down-show-hide" id="item1">
  <p>First content</p>
</div>
<div class="drop-down-show-hide" id="item2">
  <p>Second content</p>
</div>
<div class="drop-down-show-hide" id="item3">
  <p>Third content</p>
</div>

Answer 3

监听按钮的onClick事件，而不是onChange。

$(document).ready(function() {
$('.drop-down-show-hide').hide();
$('input[type="button"]').on('click',function() {
    $('#dropDown').find('option').each(function(){
        $('#'+$(this).val()).hide();
    });   
    $('#' + $('#dropDown').val()).show();
});
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js">  </script>

<select id="dropDown">
  <option>Select</option>
  <option value="item1">One</option>
  <option value="item2">Two</option>
  <option value="item3">Three</option>
</select>
<input type="button" value="view" target="_self">
<div class="drop-down-show-hide" id="item1">
  <p>First content</p>
</div>
<div class="drop-down-show-hide" id="item2">
  <p>Second content</p>
</div>
<div class="drop-down-show-hide" id="item3">
  <p>Third content</p>
</div>

Answer 4

这里有些快速，应该可以帮助您前进。

$(document).ready(function() {
	var lastSelected;
  $('input').click(function() {
  	$('#' + lastSelected).hide();
    lastSelected = $('#dropDown').val();
    $('#' + lastSelected).show()
  });
});

.hidden {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="dropDown">
  <option>Select</option>
  <option value="item1">One</option>
  <option value="item2">Two</option>
  <option value="item3">Three</option>
</select>
<input type="button" value="view" target="_self">
<div class="hidden" id="item1">
  <p>First content</p>
</div>
<div class="hidden" id="item2">
  <p>Second content</p>
</div>
<div class="hidden" id="item3">
  <p>Third content</p>
</div>

在“选择”选项的基础上向“隐藏”显示按钮？

4 个答案: