根据选择选项添加一个按钮到显示隐藏？答案

【问题标题】：Add a button to Show-Hide based on Select option?根据选择选项添加一个按钮到显示隐藏？
【发布时间】：2018-07-28 01:08:01
【问题描述】：

我想在下拉列表中添加一个按钮 (input type="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>

【问题讨论】：

当然，点击按钮，抓取select的值，隐藏所有的下拉-显示-隐藏，然后显示与下拉值相关的那个。
您在实施该问题的哪一部分时遇到问题？

标签： javascript jquery html

【解决方案1】：

这里有一个快速的东西，应该让你开始。

$(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>

【讨论】：

【解决方案2】：

当然。

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

该值将在#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>

【讨论】：

【解决方案3】：

您可以在每次选择值更改时更改视图按钮的事件处理程序。

<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>

【讨论】：

【解决方案4】：

监听按钮的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>

【讨论】：