Question

		$(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>

下面的代码用于下拉菜单。我需要将文本值传递给另一个选定的li中的li输入。两种输入应具有不同的选择。并且两个选定值都需要传递到当前类为

的主div范围

<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（'displayValue'）。value = this.options [this.selectedIndex] .text; document.getElementById（'idValue'）。value = this.options [this.selectedIndex] .text; }）

Answer 1

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

尝试->

 Car::Car(std::string calculation) {
 std::stringstream(calculation) >> *this;

Answer 2

您可以在li元素上使用click事件，然后必须将单击的li元素中的文本写到输入字段中。

$(".option").on("click", function(){
   if($("#displayValue").val() === ""){  //If first input empty...
     $("#displayValue").val($(this).text()); //...write into first input
   }else{
     if($("#displayValue").val() !== $(this).text()){ //if value from first input not equal selected value
       $("#idValue").val($(this).text()); //...write into second input
     }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<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>

Answer 3

onchange事件意味着将select DOM与option一起使用

    $('.area').on('change', function () {
        $('#displayValue').val($("select option:selected").text());
        $('#idValue').val($("select option:selected").text());
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="area">
  <option value="Area">Area</option>
  <option value="East">East</option>
  <option value="West">West</option>
  <option value="South">South</option>
</select>

<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>

如何使用js

3 个答案: