Set value of Text Input inside list item to another Input using jQuery

Question

I am trying to make drop down text input field using unordered list (ul) tag. I have two input box: Select and Code. If click Select input then a dropdown list is showing and if click on any list item, then this value set as Select input value.

Inside (li) tag there is another input box name is parentCode. I need to set this parentCode input value to code input value according to dropdown item selection.

For example: If I click on Product1, then Code input will be 1.1.1, If select Service 1.1 Code input will be then 2.1.1 Now problem is Code input value Only get the first list item (Home) parentCode value, which is 1.

Thanks for any help.

$(document).ready(function() {
  $(".selectItem").click(function() {
    var itemValu = $(this).html();
    $(".inputItem").val(itemValu);

    var parentItem = $('.parentCode').val();

    $("#code").val(parentItem);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">

  <input type="text" class="inputItem btn btn-primary dropdown-toggle " data-toggle="dropdown" value="Select">
  <span class="caret"></span>


  <ul class="dropdown-menu">

    <li><span class="selectItem">Home  </span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1" \>
      <ul class="dropdown"></ul>
    </li>
    <li><span class="selectItem">Product</span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1.1" \>
      <ul class="dropdown">
        <li><span class="selectItem">Product1</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1.1.1" \>
          <ul class="dropdown"></ul>
        </li>
      </ul>
    </li>
    <li><span class="selectItem">Service</span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2" \>
      <ul class="dropdown">
        <li><span class="selectItem">Service1</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.1" \>
          <ul class="dropdown">
            <li><span class="selectItem">Service 1.1</span>
              <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.1.1" \>
              <ul class="dropdown"></ul>
            </li>
          </ul>
        </li>
        <li><span class="selectItem">Service2</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.2" \>
          <ul class="dropdown"></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<br/><br/>
<p>Code: <input type="text" name="code" id="code" value=""></p>

guradio · Accepted Answer · 2018-06-05 05:06:56Z

The parentcode you should get is the one next to the clicked element. Just add .next() to the selector

$(document).ready(function() {
  $(".selectItem").click(function() {
    var itemValu = $(this).html();
    $(".inputItem").val(itemValu);

    var parentItem = $(this).next('.parentCode').val();

    $("#code").val(parentItem);
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="dropdown">

  <input type="text" class="inputItem btn btn-primary dropdown-toggle " data-toggle="dropdown" value="Select">
  <span class="caret"></span>


  <ul class="dropdown-menu">

    <li><span class="selectItem">Home  </span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1" \>
      <ul class="dropdown"></ul>
    </li>
    <li><span class="selectItem">Product</span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1.1" \>
      <ul class="dropdown">
        <li><span class="selectItem">Product1</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="1.1.1" \>
          <ul class="dropdown"></ul>
        </li>
      </ul>
    </li>
    <li><span class="selectItem">Service</span>
      <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2" \>
      <ul class="dropdown">
        <li><span class="selectItem">Service1</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.1" \>
          <ul class="dropdown">
            <li><span class="selectItem">Service 1.1</span>
              <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.1.1" \>
              <ul class="dropdown"></ul>
            </li>
          </ul>
        </li>
        <li><span class="selectItem">Service2</span>
          <input type="text" name="parentCode" id="parentCode" class="parentCode" value="2.2" \>
          <ul class="dropdown"></ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<br/><br/>
<p>Code: <input type="text" name="code" id="code" value=""></p>

Atif Raja · Accepted Answer · 2018-06-05 06:52:00Z

0

use <input type="submit"> inserted of 'text'in'dropdwon-toggle'

<input type="text" class="inputItem btn btn-primary dropdown-toggle " data-toggle="dropdown" value="Select">

for better result.

answered Jun 5, 2018 at 6:52

Atif Raja

271 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

Set value of Text Input inside list item to another Input using jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related