0

I have one dynamic dropdown list where i get ID and Name. And i have 2 input box above this. If user will select any value from dropdown then its ID and Name should be display in input boxes. How to get this in jquery ? Below is my code for getting dropdown list from database.

<div class="col-md-12">
    <?php
        $m_option_selectedvalue = !empty($m_option)?$m_option:"";
        $m_option_selectbox = '<select " name="id_menu" id="id_menu" class="form-control" required  ><option value=""></option>';
        foreach ($main_menu_list as $row):
            $m_option_value = $row["id_menu"];
            $m_optione_desc = $row["name_menu"];
            $m_option_selected = ($m_option_selectedvalue == $m_option_value)?" selected ":"";
            $m_option_selectbox = $m_option_selectbox .'<option value="'.$m_option_value.'" '.$m_option_selected.'>'.$m_optione_desc.'</option>';
        endforeach;
        $m_option_selectbox .= "</select>"; 
    ?>
</div>

$m_option_value = $row["id_menu"];
$m_optione_desc = $row["name_menu"];

I am getting id from $m_option_value this variable. And name from $m_optione_desc this variable.

Below is my code where i want this 2 values:

<div class="col-md-12">
    <label>Role Code </label>
    <div>
        <input type="text" name="role" id="role" class="form-control"/>
    </div>
    <label>Role Name </label>
    <div class="col-md-4">
        <input type="text" name="role_name" id="role_name" class="form-control"/>
    </div>
</div>
amit sutar
  • 541
  • 2
  • 11
  • 37
  • 3
    Have you done any research and actually tried anything? We're glad to help, but we're not a substitution for research. – M. Eriksson Jan 23 '18 at 07:21
  • 3
    Possible duplicate of [Get SELECT's value and text in jQuery](https://stackoverflow.com/questions/12614308/get-selects-value-and-text-in-jquery) – M. Eriksson Jan 23 '18 at 07:25

1 Answers1

2

try this

$('#id_menu').change(function(){
  var opt = $(this).find('option:selected');
  $('#role').val(opt.val());
  $('#role_name').val(opt.html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="id_menu" id="id_menu" class="form-control" required  ><option value=""></option>
<option value="1"> item 1</option>
<option value="2"> item 2</option>
<option value="3"> item 3</option>
</select>

<div class="col-md-12">
    <label>Role Code </label>
    <div>
        <input type="text" name="role" id="role" class="form-control"/>
    </div>
    <label>Role Name </label>
    <div class="col-md-4">
        <input type="text" name="role_name" id="role_name" class="form-control"/>
    </div>
</div>
CME64
  • 1,673
  • 13
  • 24