how to get the text value from selected li and pass it to input in another li using js

how to get selected li value in javascript
how to get selected li value in ul onclick event in jquery
how to get id of li in javascript
how to get li attribute value in jquery
how to get selected li value in jquery
how to get active li value in jquery
how to set li value in javascript
how to get text of li in javascript

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

on change event will not work,because when you click on li tag that doesn't change any input check -> definition

try ->

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

how to set selected li value to input with jquery, The following will achieve want you want: HTML <form name="size-form"> <ul id= "sizelist"> <li data-value="S"><a href="#">S</a></li> <li data-value="M"><a� After input text and click: Using jquery val() method: The val() method is used to return or set the value attribute of the selected elements.In default mode this method returns the value of the value attribute of the FIRST matched element & sets the value of the value attribute for ALL matched elements.

You could use an click event on your li elements and then you have to write the text from your clicked li element into your input fields.

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

Get the value attribute of the selected LI element in jQuery UI menu , Hello fellow jQuery users, I have prepared a simple jsFiddle demonstrating my 2 problems: For that I have taken the jQuery UI menu with� How to Get the Value of Selected Option in a Select Box Using jQuery. Topic: JavaScript / jQuery Prev|Next. Answer: Use the jQuery :selected Selector. You can use the jQuery :selected selector in combination with the val() method to find the selected option value in a select box or dropdown list.

onchange event means using select DOM with 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>

.text(), (Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.) Consider <li>list <strong>item</ strong> 2</li>. </ul> To set or get the text value of input or textarea elements, use the .val() method. <script src="https://code.jquery.com/jquery-3.5.0.js"></ script>. How to Get the Value of Text Input Field Using JavaScript. Topic: JavaScript / jQuery Prev|Next. How to get selected file name from input type file using jQuery;

JavaScript, JavaScript Get Selected LI From UL List Source code: li Text Value From An UL List Duration: 4:31 Posted: Nov 11, 2017 Using a for Loop to Obtain Selected Option. You can use a for loop to iterate through the options of a select list to determine which is selected. A function can be defined to return a reference to the selected option or its value. The following returns a reference to the selected option:

HTML DOM Li value Property, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java� Definition and Usage. The value property sets or returns the value of the value attribute of a text field. The value property contains the default value OR the value a user types in (or a value set by a script).

Modifying the document, Now let's create the same div with JavaScript (assuming that the styles are in ol id = " ol " > < li > 0 </ li > < li > 1 </ li > < li > 2 </ li > </ ol > < script > ol . before So, these methods can only be used to insert DOM nodes or text pieces. Please note: if we want to move an element to another place – there's� HTML Forms contains various elements like input fields, options, textarea etc. and for further processing, we need to get value of each field using jQuery. This tutorial, Explains about, how to get input values of different HTML form elements using jQuery as follows:

Comments
  • It is not clear what you are trying to accomplish here. Please explain your issue with more details.
  • please create a working code snippet of your code. thanks
  • i want to take the text value from li tags after the input boxes and want to pass those values to input box
  • use select and not li :w3schools.com/tags/tag_select.asp
  • li is coming from js plugin i have used select only
  • that what you mean?
  • i want those input fields inside the dropdown like options not outside the dropdown select