#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
$(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, который имеет класс current
<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; })
Комментарии:
1. Непонятно, чего вы пытаетесь здесь достичь. Пожалуйста, объясните вашу проблему более подробно.
2. пожалуйста, создайте рабочий фрагмент вашего кода. Спасибо
3. я хочу взять текстовое значение из тегов li после полей ввода и передать эти значения в поле ввода
4. использовать
selectи неli: w3schools.com/tags/tag_select.asp5. li поступает из плагина js, который я использовал только для выбора
Ответ №1:
событие on change не сработает, потому что при нажатии на тег li, который не изменяет никаких входных данных, проверьте -> определение
попробуйте ->
$('.area li').on('click', function () {
document.getElementById('displayValue').value =
this.options[this.selectedIndex].text;
document.getElementById('idValue').value = this.options[this.selectedIndex].text;
})
Ответ №2:
Вы могли бы использовать событие click для ваших li-элементов, а затем вам нужно записать текст из выбранного вами 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> Ответ №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> Комментарии:
1. это то, что вы имеете в виду?
2. я хочу, чтобы эти поля ввода находились внутри выпадающего списка, подобного параметрам, а не вне выпадающего списка select