CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
user8815449
user8815449

Reputation:

Add text to input from select button

I have Bootstrap 4 and one input group. I want to click on my img, then show a select menu and after I click an option, this must be in input field. How I can do this?

<div class="input-group">
    <input class="form-control" type="text">
    <span class="input-group-addon">
        <img src="./img/plus.png"alt="minus" class="align-middle">
    </span>
</div>

Upvotes: 1

Views: 1036

Answers (2)

freginold
freginold

Reputation: 3956

There are a couple of things you need to make happen in order to get the results you're looking for:

#1: Show a select menu when the image is clicked on

You can have a select menu appear by adding an event listener to your img tag, so that when the image is clicked on, the select menu will be shown.

myImg.addEventListener('click', function() {
  myMenu.style.display = "inline-block";
});

#2: Have the chosen option appear in the input box

In order to show the selected option in your input box, you'll need another event listener:

myMenu.addEventListener('change', function(e) {
  myInput.value = e.target.value;
});

Putting those two event listeners together with a little bit of CSS, the HTML for your <select> menu, and a few variable declarations gives us this working code:

$(document).ready(function() {
  var myInput = document.getElementsByTagName('input')[0];
  var myImg = document.getElementsByTagName('img')[0];
  var myMenu = document.getElementById('selectMenu');

  myImg.addEventListener('click', function() {
    // when the img is clicked, show the select menu
    myMenu.style.display = "inline-block";
  });

  myMenu.addEventListener('change', function(e) {
    // when an option in the select menu is selected, show it in the input box
    myInput.value = e.target.value;
  });
});
#selectMenu {
  display: none;
  float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet">

<div class="input-group">
  <input class="form-control" type="text">
  <span class="input-group-addon">
    <img src="./img/plus.png"alt="minus" class="align-middle">
  </span>
  <br />
</div>
<select id="selectMenu">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <option>Option 4</option>
    </select>

Of course, using Bootstrap or just plain CSS, you can style the menu however you want.

Upvotes: 0

Farhad Bagherlo
Farhad Bagherlo

Reputation: 6699

$("ul.dropdown-menu li a").on("click",function(){
  $(this).closest(".input-group").find("input.form-control").val($(this).attr("data-Action"))
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/3.3/dist/js/bootstrap.min.js"></script>
<link href="https://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-6" style="padding-top:10px;">
<div class="input-group"> 
   <div class="input-group-btn"> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i style="padding-bottom:4px;" class="fa fa-plus"></i>
     </button> 
     <ul class="dropdown-menu"> 
        <li><a data-Action="1" href="#">Action 1</a></li>
        <li><a data-Action="2" href="#">Action 2</a></li> 
        <li><a data-Action="3" href="#">Action 3</a></li>
      </ul> 
  </div>
  <input class="form-control"> 
</div>
</div>

Upvotes: 2

Related Questions