Question

我需要按钮＆＃34;详情＆＃34;仅在我选择之后出现：UK（来自第一个列表） - ＆gt;控制（从第二个列表），否则保持隐藏。

HTML代码为：

    G1   G2    
  A1 A2 B1 B2 
P1: A1 A2 B1 B2 
P2: A1 B1 A2 B2 
P3: A1 B2 A2 B1 
P4: A2 B1 A1 B2 
P5: A2 B2 A1 B1 
P6: B1 B2 A1 A2

和脚本：

<div id="section2_table" class="section2_class">
    <div id="systemID"></div>
    <div id="countryID"></div>
    <div id="departmentID"></div>
    <div id="areaID"></div>
    <div id="jobRoleID"></div>
    <div id="ReleaseStrategy"></div>
    <div id="Details2"><span>Cateva detalii aici</span></div>
    <div id="popUpDetails"><a href="#">DETAILS</a></div>
</div>

不幸的是，它不起作用......任何建议都会受到高度赞赏。

Answer 1

我在这里做了一个jsfiddle： https://jsfiddle.net/2r294dsq/

因为你没有为你的问题提供任何结构/ css，所以我简化了它。

对于DIV，没有像kapantzak在评论中所说的那样“改变”事件 - 所以请点击一下。

之后你可以展示你的div。

<强>已更新

$(function() {
  $("#departmentID").on('change', function() {
        $('#popUpDetails').show();
  }, 'select.DepartmentClass');
});

离开div后的

HTML：

<select class="DepartmentClass" jQuery111009314246867544693="10">

Answer 2

我想出了类似的东西：

＆＃13;

$(function () {
  $('#section2_table').selectable();
  
  
  $("#firstList").change(function() {
    if (this.selectedOptions[0].value == 'UK') {
      $("#popUpDetails").show();
    } else {
      $("#popUpDetails").hide();
    }
  }).trigger('change');

});

＆＃13;

#section2_table .ui-selecting { background: #FECA40; }
#section2_table .ui-selected { background: #F39814; color: white; }
#section2_table { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#section2_table div { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; border: double;}

＆＃13;

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

First List: <select id="firstList">
    <option value="DE">DE</option>
    <option value="UK">UK</option>
    <option value="US">US</option>
</select>
<div id="section2_table" class="section2_class">
    <div id="systemID">1</div>
    <div id="countryID">2</div>
    <div id="departmentID">3</div>
    <div id="areaID">4</div>
    <div id="jobRoleID">5</div>
    <div id="ReleaseStrategy">6</div>
    <div id="Details2"><span>Cateva detalii aici</span></div>
    <div id="popUpDetails"><a href="#">DETAILS</a></div>
</div>

＆＃13;

Answer 3

$(function() {
 $('#selectList').change(function() 
  {
if ($('#selectList').hasAttr('selected')) 
 {
  $('#popUpDetails').show();
   } 
   else 
   {
    $('#popUpDetails'").hide();
   }
 }).trigger('change');
});

selectList是下拉列表的ID

列表选择后出现按钮

3 个答案: