I have a database transaction with an option value. What can I do so that the select option value is not empty when I click on the ul li tag?

Following my code:

$('.selected-change li').click(function () {
  $('#city').val($(this).data('val')).trigger('change');
  //console.log($(this).text())
});


$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {

  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
});

#city{
  width:100px;
  height:50px;
}
ul {
   height: 30px;
   width: 150px;
   border: 1px #000 solid;
}
ul li {padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; list-style:none;}
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; list-style:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="city">
  <option value="1">City - 1</option>
  <option value="2">City - 2</option>
  <option value="3">City - 3</option>
</select>
<ul class="selected-change list-unstyled">
  <li class="init">Select</li>
  <li data-val="1">City - 1</li>
  <li data-val="2">City - 2</li>
  <li data-val="3">City - 3</li>
</ul>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Thank you advance.

CodePudding user response：

Problem is the first li is clicked and it doesn't have a value but you're trying to change the select menu with it anyways. Just specify you want the listener to only apply to li elements that have data-val attributes.

$('.selected-change li[data-val]')...

$('.selected-change li[data-val]').click(function () {
  $('#city').val($(this).data('val')).trigger('change');
});


$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
});

#city{
  width:100px;
  height:50px;
}
ul {
   height: 30px;
   width: 150px;
   border: 1px #000 solid;
}
ul li {padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; list-style:none;}
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; list-style:none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="city">
  <option value="1">City - 1</option>
  <option value="2">City - 2</option>
  <option value="3">City - 3</option>
</select>
<ul class="selected-change list-unstyled">
  <li class="init">Select</li>
  <li data-val="1">City - 1</li>
  <li data-val="2">City - 2</li>
  <li data-val="3">City - 3</li>
</ul>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

It appears to me that you can...

1. Erase this function completely, because it is responsible for clearing the selected option text.

$('.selected-change li').click(function () {
   $('#city').val($(this).data('val')).trigger('change');
   //console.log($(this).text())
});

2. Then, move the $('#city') code from above into the below function...

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
   allOptions.removeClass('selected');
   $(this).addClass('selected');
   $("ul").children('.init').html($(this).html());
   allOptions.toggle();
   $('#city').val($(this).data('val')).trigger('change'); // <-- move here
});

Based on that change, the selected option only changes after clicking the list items which is what I think you're asking for.