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>

Answer 1

1. 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>

Answer 2

在<input type="submit">

中使用'text'插入'dropdwon-toggle'

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

获得更好的结果。