Not able to get value in input field based on the dropdown selection in bootstrap 3

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>

in main.js file:

$(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");
    }
  });
});

So, when i select the option from the dropdown it does not populate on the input fields at all .I have tried using document.getElementById also but it is of no use .Where I am going wrong ?

Answer 1

Your select-div is not the select element so that change event not worked on it, You can do like this :

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