如何从选定的li中获取文本值，并通过js将其传递给另一个li中的输入

Question

null

		$(document).ready(function () {
    function create_custom_dropdowns() {
			$('select').each(function (i, select) {
				if (!$(this).next().hasClass('dropdown')) {
					$(this).after('<div class="dropdown ' + ($(this).attr('class') || '') + '" tabindex="0"><span class="current"></span><div class="list"><ul></ul></div></div>');
					var dropdown = $(this).next();
					var options = $(select).find('option');
					var selected = $(this).find('option:selected');
					dropdown.find('.current').html(selected.data('display-text') || selected.text());

					if ($(this).hasClass('area')) {
						dropdown.find('ul').append('<li class="option"><input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min"> <input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>')
					}
					options.each(function (j, o) {
						var display = $(o).data('display-text') || '';
						dropdown.find('ul').append('<li class="option ' + ($(o).is(':selected') ? 'selected' : '') + '" data-value="' + $(o).val() + '" data-display-text="' + display + '">' + $(o).text() + '</li>');
					});
				}
			});
		}
	
		$('.area').on('change', function () {
			document.getElementById('displayValue').value = this.options[this.selectedIndex].text;
			document.getElementById('idValue').value = this.options[this.selectedIndex].text;
		})

		$(".box1").change(function () {
			var selected = $(this).find("option:selected").text();
			$(".area-ft").val(selected);
			if (selected === "0") {
				$(".area-ft").show();
			} else {
				$(".area-ft").hide();
			}
		});

		// Open/close
		$(document).on('click', '.dropdown', function (event) {
			$('.dropdown').not($(this)).removeClass('open');
			$(this).toggleClass('open');
			if ($(this).hasClass('open')) {
				$(this).find('.option').attr('tabindex', 0);
				$(this).find('.selected').focus();
			} else {
				$(this).find('.option').removeAttr('tabindex');
				$(this).focus();
			}
		});
		// Close when clicking outside
		$(document).on('click', function (event) {
			if ($(event.target).closest('.dropdown').length === 0) {
				$('.dropdown').removeClass('open');
				$('.dropdown .option').removeAttr('tabindex');
			}
			event.stopPropagation();
		});
		// Option click
		$(document).on('click', '.dropdown .option', function (event) {
			$(this).closest('.list').find('.selected').removeClass('selected');
			$(this).addClass('selected');
			var text = $(this).data('display-text') || $(this).text();
			$(this).closest('.dropdown').find('.current').text(text);
			$(this).closest('.dropdown').prev('select').val($(this).data('value')).trigger('change');
		});

		// Keyboard events
		$(document).on('keydown', '.dropdown', function (event) {
			var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
			// Space or Enter
			if (event.keyCode == 32 || event.keyCode == 13) {
				if ($(this).hasClass('open')) {
					focused_option.trigger('click');
				} else {
					$(this).trigger('click');
				}
				return false;
				// Down
			} else if (event.keyCode == 40) {
				if (!$(this).hasClass('open')) {
					$(this).trigger('click');
				} else {
					focused_option.next().focus();
				}
				return false;
				// Up
			} else if (event.keyCode == 38) {
				if (!$(this).hasClass('open')) {
					$(this).trigger('click');
				} else {
					var focused_option = $($(this).find('.list .option:focus')[0] || $(this).find('.list .option.selected')[0]);
					focused_option.prev().focus();
				}
				return false;
				// Esc
			} else if (event.keyCode == 27) {
				if ($(this).hasClass('open')) {
					$(this).trigger('click');
				}
				return false;
			}
		});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="b-drop listing-drops">
<form class="serc">
<select name="zone" class="zone ">
<option value="volvo">Bangalore East</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<select name="zone" class="locality">
<option value="volvo">All Localities</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<select name="zone" class="area box1">
<option value="volvo">Area</option>
<option value="saab">East</option>
<option value="fiat">West</option>
<option value="audi">South</option>
</select>
<button type="button" class="search button button--aylen">Find Properties</button>
<button type="button" class="clear-filter">Clear Filters</button>
</form>
</div>

null

下面的代码是用于下拉列表的。我需要将文本值传递给input，它是来自另一个选定li的li中的li。两种输入都应该有不同的选择。并且两个选定值都需要传递给具有类current的主div span

<div class="dropdown area" tabindex="0">
    <span class="current">East</span>
    <div class="list">
       <ul>
         <li class="option">
           <input id="displayValue" class="area-ft" type="text" name="text" placeholder="Min"> 
           <input id="idValue" class="area-ft" type="text" name="text" placeholder="Max"> </li>
         <li class="option" data-value="volvo" data-display-text="">Area</li>
         <li class="option  selected" data-value="saab" data-display-text="">East</li>
         <li class="option " data-value="fiat" data-display-text="">West</li>
         <li class="option " data-value="audi" data-display-text="">South</li>
       </ul>
   </div>
</div>

我试过用这个

$('.area').ON('change'，function(){document.getElementById('display value').value=this.options[this.selectedindex].text；document.getElementById('id value').value=this.options[this.selectedindex].text；}）

Answer 1

事件将不起作用，因为当您单击不改变任何输入的li标记时，检查->definition

尝试->

$('.area li').on('click', function () {
    document.getElementById('displayValue').value = 
    this.options[this.selectedIndex].text;
    document.getElementById('idValue').value = this.options[this.selectedIndex].text;
})