Помогите, пожалуйста, на js реализовать следующую задачу:
Поле "Тип" влияет на минимальное значение поля "Цена":
<fieldset class="ad-form__element">
<label class="ad-form__label" for="type">Тип</label>
<select id="type" name="type">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</fieldset>
<fieldset class="ad-form__element">
<label class="ad-form__label" for="price">Цена</label>
<input id="price" name="price" type="number" max="1000000" placeholder="5000" required>
</fieldset>
"one" - минимальная цена 0
"two" - минимальная цена 1000
"three" - минимальная цена 5000
"four" - минимальная цена 10 000
Вместе с минимальным значением цены нужно изменять и плейсхолдер.
const types = {
one: 0,
two: 1000,
three: 5000,
four: 10000
};
type.addEventListener('change', e => {
let minVal = types.hasOwnProperty(e.target.value) ? types[e.target.value] : 0;
price.setAttribute('placeholder', minVal);
price.setAttribute('min', minVal);
// Если необходимо контролировать ранее веденное значение
// price.value = price.value < minVal ? minVal : price.value;
});
type.dispatchEvent(new Event('change'));
<fieldset class="ad-form__element">
<label class="ad-form__label" for="type">Тип</label>
<select id="type" name="type">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</fieldset>
<fieldset class="ad-form__element">
<label class="ad-form__label" for="price">Цена</label>
<input id="price" name="price" type="number" max="1000000" placeholder="5000" required>
</fieldset>
let dependency = [{
"Key": "one",
"Value": "0"
},
{
"Key": "two",
"Value": "500"
},
{
"Key": "three",
"Value": "1000"
},
{
"Key": "four",
"Value": "1500"
},
]; // зависсимости (я бы сразу в value запихивал...)
document.addEventListener('DOMContentLoaded', function() {
let select = document.getElementById("type"); // наш select
let options = select.querySelectorAll("option"); // наши элементы списка
let price = document.getElementById("price"); // наш input
f(options, select, price);
select.onchange = function() { // при выборе элемента
f(options, select, price);
};
});
function f(options, select, price) {
options.forEach(function(e, ind) { // хожу по опциях
if (ind === select.selectedIndex) { // если индекс select-а равен номеру option
let curPrice = null;
dependency.forEach(ee => { // ищем зависсимость
if (ee.Key === e.value) { // если нашли
curPrice = ee.Value; // достаем цену
return;
}
});
price.setAttribute("placeholder", curPrice); // меняем placeholder
}
});
}
<fieldset class="ad-form__element">
<label class="ad-form__label" for="type">Тип</label>
<select id="type" name="type">
<option value="one">one</option>
<option value="two" selected>two</option>
<option value="three">three</option>
<option value="four">four</option>
</select>
</fieldset>
<fieldset class="ad-form__element">
<label class="ad-form__label" for="price">Цена</label>
<input id="price" name="price" type="number" max="1000000" placeholder="5000" required>
</fieldset>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
В общем нужно сделать так, чтобы в div находился input и button (типо как строка поика, но еще с background в )Но по каким-то причинам они выпадают
У меня после запроса приходит список, который я заполняю в ComboboxУ меня получается так, что после нового запроса список в Combobox дополняется,...