Question

我已经制作了一个下拉菜单。我想把它带到哪里，当你点击下拉菜单中的一个项目弹出一个面板（面板已经制作完成）。那我该怎么做呢？这是我目前的代码。

<div class="row">
        <div class="large-12 columns">
          <label>Label</label>
           <select onchange="jsFunction()">
           <option value="blank"></option>
             <optgroup label="Label">
               <option value="Item #1">Item #1</option>
               <option value="Item #2">Item #2</option>
               <option value="Item #3">Item #3</option>
             </optgroup>
             <optgroup label="Label">
               <option value="Item #4">Item #4</option>
               <option value="Item #5">Item #5</option>
               <option value="Item #6">Item #6</option>
               <option value="Item #7">Item #7</option>
             </optgroup>
          </select>
        </div>
      </div>

Answer 1

与此JS Fiddle

一样

＆＃13;

var popup = $('#popup'),
  select = $('#slct');
$('#popup #close').on('click', function(evt) {
  evt.preventDefault();
  popup.hide();
});

select.on('change', function() {
  popup.show();
});

＆＃13;

#popup {
  position: absolute;
  width: 350px;
  height: 150px;
  display: block;
  background: #CFCFCF;
  left: calc(50% - 175px);
  top: 50px;
  padding: 5px;
  z-index: 10;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  cursor: default;
  display: none;
}
#popup h3 {
  border-bottom: 1px solid #999
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="large-12 columns">
    <label>Label</label>
    <select id="slct">
      <option value="blank"></option>
      <optgroup label="Label">
        <option value="Item #1">Item #1</option>
        <option value="Item #2">Item #2</option>
        <option value="Item #3">Item #3</option>
      </optgroup>
      <optgroup label="Label">
        <option value="Item #4">Item #4</option>
        <option value="Item #5">Item #5</option>
        <option value="Item #6">Item #6</option>
        <option value="Item #7">Item #7</option>
      </optgroup>
    </select>
  </div>
</div>
<div id="popup">
  <h3>Pop Up Title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  <a id="close" href="">close</a>
</div>

＆＃13;

单击下拉选项时弹出面板

1 个答案: