I am using select search form and i trying to display selected value in to the input text field

Question

 <script> var selectPurp = document.getElementById('purpose'); var inputPurp = document.getElementById('txtpurpose'); selectPurp.onchange = function() { inputPurp.value = this.value; } </script>

 <div class="row"> <div class="col-md-12"> <form name="purpose" id="purpose"> <select class="selsm-3 inblock-3 select2" name="purpose" id="purpose"> <option value="">Select</option> <optgroup label="Portfolio" class="purpose"> <option value="Indian Portfolio">S0001</option> <option value="Investment abroad">S0002</option> </optgroup> <optgroup label="Investments" class="purpose"> <option value="Indian Direct">S0003</option> <option value="debt shares">S0004</option> <option value="Purchase">S0005</option> </optgroup> </select> </form> </div> </div> <div class="col-md-12 pad-top"> <div class="form-group"> <label>Purpose Description</label> <input type="text" class="form-control" placeholder="Min / Max 10 chars" required="" name="txtpurpose" id="txtpurpose" onClick="checkVal()"> </div> </div>

I used search box in the select option and i try to display the value in the input text button or label or any other place. more i did the same method for without using search (form option ie select2). i used for bootstrap css for display search box. I also wish to how do i get modal popup display on the using same function. i search for the modal box code and i did not get any luck. Can you please help me on this.

Answer 1

 function fn (event) { document.getElementById('txtpurpose').value = event.value; }

 <div class="row"> <div class="col-md-12"> <form name="purpose" id="purpose1"> <select class="selsm-3 inblock-3 select2" name="purpose" id="purpose" onchange="fn(this)"> <option value="">Select</option> <optgroup label="Portfolio" class="purpose"> <option value="Indian Portfolio">S0001</option> <option value="Investment abroad">S0002</option> </optgroup> <optgroup label="Investments" class="purpose"> <option value="Indian Direct">S0003</option> <option value="debt shares">S0004</option> <option value="Purchase">S0005</option> </optgroup> </select> </form> </div> </div> <div class="col-md-12 pad-top"> <div class="form-group"> <label>Purpose Description</label> <input type="text" class="form-control" placeholder="Min / Max 10 chars" required="" name="txtpurpose" id="txtpurpose" onClick="checkVal()"> </div> </div>

call the function fn from onchange in HTML and pass this reference to the function to access the value and use the same function to invoke the modal pop up. this will be helpful in reusing the js code instead of assigning at the start. I think this is what you were asking. If I miss understood please comment it.

Answer 2

I recommend you to use Select2 in this regard, it will handle it for you. Also you can enjoy various options

check this out: https://select2.org/

PS: wanted to comment it but haven't enough reputation, so just consider it as a recommendation not an answer.