Add text to input from select button

Question

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>

Where is your select menu? Can you clarify what you're asking? What do you want to happen after you click on the img? — freginold
– freginold, Commented Oct 24, 2017 at 18:33
Do you want a select menu to appear when you click on the image? — freginold
– freginold, Commented Oct 24, 2017 at 18:38
1) I click to img 2) I see select menu (dropdown menu? )under my img 3) I click to item in menu and it teleported to input field — user8815449
– user8815449, Commented Oct 24, 2017 at 18:39

Farhad Bagherlo · Accepted Answer · 2017-10-24 18:51:52Z

2

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

edited Oct 24, 2017 at 18:51

answered Oct 24, 2017 at 18:43

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8815449 Over a year ago

sorry, can u helo me with it stackoverflow.com/questions/47770182/… ?

freginold · Accepted Answer · 2017-10-24 19:02:33Z

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.

Collectives™ on Stack Overflow

Add text to input from select button

2 Answers 2

1 Comment

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

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

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

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

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

Comments

Your Answer

Sign up or log in

Post as a guest

Related