Question

该选项未被定位。我需要添加到jquery以显示该选项或使用用户选择的下拉选项填充另一个div。好的，我知道我做的很简单。基本上，当用户点击下拉列表中的选项时，将显示事件div。此处单击的选项将出现在另一个div中。请告诉我我缺少的内容或者您是否需要更多信息。我知道我走在正确的轨道上。

所以这是我到目前为止的jquery：

$(function()
{
    $("#event").hide();
    $("#myselect option:selected").click(function() {
      $("#event").show();
     });
});

我如何拥有html和表单是这样的：

div隐藏然后显示，并显示选项值

<div id="event" class="phone_button">Add Event</div>

drop_down表单填充数组。

<?php
            $options = array(
                '1' => '1',
                '2' => '2',
            );
        ?>

        <div class="row">
                <div class="col-md-12">
                    <h3>Add Event To Location</h3>
                    <div class="row">

                <div class="row">
                    <div id="myselect" class="col-md-12">

                        <p>If you have previously created a template for your digital banner please select it from the list, otherwise select no template.</p>
                        <form>
                        <select id="whatever" name="name_of_selectbox">
                        <option value="">Select</option>
                        <option value="1">Test</option>
                        <option value="2">Testing</option>
                        </select>
                        </form>
                        <hr>
                    </div>
                </div>
                    </div>
                </div>
                    <p>You can add an event created in MyApplication.</p>

            </div>

Answer 1

我认为，如果选择#event以外的选项，那么您要找的是显示select

＆＃13;

$(function() {
  $("#events").hide();
  $("#myselect select").change(function() {
    var $selected = $('#myselect select option:selected');
    if (!$selected.hasClass('added')) {
      $('<li />', {
        'data-value': $selected.val(),
        text: $selected.text()
      }).appendTo('#events');
      $selected.addClass('added')
    }
    $("#events").show();
  });
});

＆＃13;

#events li{
  list-style: none;
  margin-top: 5px;
  border: 1px solid red;
  background-color: lightgrey;
}
#events li:first-child{
  margin-top: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css">
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.js"></script>


<div class="row">
  <div class="col-md-12">
    <h3>Add Event To Location</h3>
    <div class="row">

      <div class="row">
        <div id="myselect" class="col-md-12">

          <p>If you have previously created a template for your digital banner please select it from the list, otherwise select no template.</p>
          <form>
            <select id="whatever" name="name_of_selectbox">
              <option value="">Select</option>
              <option value="1">Test</option>
              <option value="2">Testing</option>
            </select>
          </form>
          <hr/>
        </div>
      </div>
    </div>
  </div>
  

</div>
<ul id="events"></ul>

＆＃13;

Answer 2

$(function()
{
   $("#event").hide();
   $("#myselect").change(function() {
     $("#event").show();
     $("#another_div").html($('option:selected', $(this)).text());
   });
});

这就是你要找的东西吗？

使用所选选项定位目标ID

2 个答案: