Question

<div class="dropdown pull-left createspace  select select-div">
   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the type
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-left">
      <li id="api">
         <a href="#">API</a>
      </li>
      <li id="socket">
         <a href="#">SOCKET</a>
      </li>
   </ul>
</div>
<!-- my drop down ends here-->
<form>
   <div class="form-group">
      <label for="usr">Name:</label>
      <span id="ip1">IP Address: </span>
      <input type="text" class="form-control" placeholder="IpAddress" id="usr" name="api">
   </div>
   <div class="form-group">
      <label for="usr">Network Name</label>
      Network Name
      <input type="text" class="form-control" placeholder="Network Name" id="usr" name="socket">
   </div>
</form>

在main.js文件中：

$(document).ready(function() {
  $(".select-div").on("change", "select", function(e) {
    //use on to delegate
    var v = $(e.target).val(),
      t = $(e.target)
        .find(":selected")
        .text(),
      p = $(e.target).closest(".select-div");
    console.log(v);
    var socketUrl = "http://localhost:8081/api/admin/connect";
    var endPointUrl = "http://localhost:8081/api/admin/endpoint";
    if (v) {
      var c = (function(t) {
        switch (t) {
          case "api":
            return endPointUrl;
          case "socket":
            return socketUrl;
        }
      })(t);
      p.find('[name="api"]').val(c);
      p.find('[name="socket"]').val("None");
    }
  });
});

所以，当我从下拉列表中选择该选项时，它根本不会填充在输入字段中。我也尝试过使用document.getElementById，但这毫无用处。我哪里出错了？

Answer 1

您的select-div不是select元素，因此change事件不起作用，您可以这样做：

$(document).ready(function() {
  $(".dropdown-menu li a").click(function() {
    //use on to delegate
    var v = $(this).text();
    var socketUrl = "http://localhost:8081/api/admin/connect";
    var endPointUrl = "http://localhost:8081/api/admin/endpoint";
    if (v) {
      var c = '';
      switch (v) {
        case "API":
          c = endPointUrl;
          break;
        case "SOCKET":
          c = socketUrl;
          break;
      }
      $('[name="api"]').val(c);
      $('[name="socket"]').val("None");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="dropdown pull-left createspace select select-div">
   <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select the type
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-left">
      <li id="api">
         <a href="#">API</a>
      </li>
      <li id="socket">
         <a href="#">SOCKET</a>
      </li>
   </ul>
</div>
<!-- my drop down ends here-->
<form>
   <div class="form-group">
      <label for="usr">Name:</label>
      <span id="ip1">IP Address: </span>
      <input type="text" class="form-control" placeholder="IpAddress" id="usr" name="api">
   </div>
   <div class="form-group">
      <label for="usr">Network Name</label>
      Network Name
      <input type="text" class="form-control" placeholder="Network Name" id="usr" name="socket">
   </div>
</form>

无法根据引导程序3

1 个答案: