Подскажите неясности по onchange и условиям
Пока привязал onchange="causezpzchange()" к causezpzId(HTML 2)
.
Можно ли к cause(HTML 1) создать еще один onchange? Или как можно это решить?
Как чтобы возвращался список изначальный. Когда $("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
то после выбора другого у всех показывает этот же value="1" а нужно чтобы возвращался к первоначальному.
HTML 1
<select id="cause" name="causeId"
onchange="document.getElementById('causeWarning').hidden = true;"><option value="0"></option><option value="1">4.1 А1</option> <option value="2">4.2 А2</option><option value="3">4.3 А3</option></select>
HTML 2
<select id="causezpzId" name="causezpzId" onchange="causezpzchange()">
<option value="0"></option> <option value="1">4.2 Об обеспечении</option><option value="2">4.3 О выборе А1</option><option value="3">4.4 О выборе А2</option>
</select>
HTML 3
<select id="rectif1zpzId" name="rectif1zpzId">
<option value="0"></option><option value="1">3.5.1 обеспечение</option><option value="2">3.5.2 о фальсификация</option><option value="3">3.5.3 иное</option>
</select>
HTML 4
<select id="rectif2zpzId" name="rectif2zpzId">
<option value="0"></option><option value="1">3.6.2.1 нарушение сроков</option><option value="2">3.6.2.2 иное</option><option value="3">3.7.2.1 возраст </option>
</select>
function causezpzchange(){
if($('#causezpzId').val() == '1'){
$('#rectif1zpzId').attr("disabled",true);
$('#rectif2zpzId').attr("disabled",true);
}
else if($('#causezpzId').val() == '2'){
$("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
$('#rectif2zpzId').attr("disabled",true);
}
else if($('#causezpzId').val() == '3'){
$("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
$("#rectif2zpzId").append( $('<option value="1">3.6.2.1 нарушение сроков</option>'));
}
else {
$('#rectif1zpzId').val("");
$('#rectif1zpzId').attr("disabled",false);
$('#rectif2zpzId').val("");
$('#rectif2zpzId').attr("disabled",false);
}
}
Но в идеале хотелось бы, что-то подобное
function cause(){
if($('#cause').val() == '1'){
$("#causezpzId").append( $('<option value="1">4.2 Об обеспечении</option>'));
$('#rectif1zpzId').attr("disabled",true);
$('#rectif2zpzId').attr("disabled",true);
}
else if($('#cause').val() == '2'){
$("#causezpzId").append( $('<option value="2">4.3 О выборе А1</option>'));
$("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
$('#rectif2zpzId').attr("disabled",true);
}
else if($('#cause').val() == '3'){
$("#causezpzId").append( $('<option value="3">4.4 О выборе А2</option>'));
$("#rectif1zpzId").append( $('<option value="1">3.5.1 обеспечение</option>'));
$("#rectif2zpzId").append( $('<option value="1">3.6.2.1 нарушение сроков</option>'));
}
else {
$('#rectif1zpzId').val("");
$('#rectif1zpzId').attr("disabled",false);
$('#rectif2zpzId').val("");
$('#rectif2zpzId').attr("disabled",false);
}
}
Подскажите пожалуйста с тремя case
$('#cause').change(function() {
switch ( $('#cause').val() ) {
case "22":
$("#causezpzId [value]"). hide();
$("#causezpzId").append( $('<option value="14">4.2 Об </option>'));
$("#causezpzId [value='14']").attr("selected", "selected");
$("#rectif1zpzId [value]"). hide();
$("#rectif2zpzId [value]"). hide();
break
case "23":
$("#causezpzId [value]"). hide();
$("#causezpzId").append( $('<option value="15">4.3 О выборе</option>'));
$("#causezpzId [value='15']").attr("selected", "selected");
$("#rectif1zpzId [value]"). hide();
$("#rectif2zpzId [value]"). hide();
break
case "24":
$("#causezpzId [value]"). hide();
$("#causezpzId").append( $('<option value="16">4.4 О выборе</option>'));
$("#causezpzId [value='16']").attr("selected", "selected");
$("#rectif1zpzId [value]"). hide();
$("#rectif2zpzId [value]"). hide();
break
case "25":
$("#causezpzId [value]"). hide();
$("#causezpzId").append( $('<option value="13">4.1 О выборе/замене</option>'));
$("#causezpzId [value='13']").attr("selected", "selected");
$("#rectif1zpzId [value]"). hide();
$("#rectif2zpzId [value]"). hide();
break
case "26":
//$("#causezpzId").append( $('<option value="0"></option>'));
$('#causezpzId').val("");
$("#causezpzId [value]"). hide();
$("#causezpzId").append( $('<option value="17">4.5 об организации </option>'));
**НАПРИМЕР ЕСЛИ causezpzId=17 ТО rectif1zpzId ПОКАЗЫВАЛО VAL=1 И VAL=2
И НАПРИМЕР ЕСЛИ rectif1zpzId=1 ТО rectif2zpzId ПОКАЗЫВАЛО VAL=1**
$("#causezpzId").append( $('<option value="18">4.6 об оказании</option>'));
$("#causezpzId").append( $('<option value="19">4.7 о проведении </option>'));
$("#causezpzId").append( $('<option value="20">4.8 о каждом</option>'));
$("#rectif1zpzId [value]"). hide();
$("#rectif2zpzId [value]"). hide();
break
default:
$('#causezpzId').val("");
$("#causezpzId [value]"). show();
$('#rectif1zpzId').val("");
$("#rectif1zpzId [value]"). show();
$('#rectif1zpzId').val("");
$("#rectif2zpzId [value]"). show();
}
});
Потому что в идеале нужно знать "чистый" JS, даже если кодите только на jQuery)
<элем onchange="..."
этот и другие событийные атрибуты onclick и т.п. могут иметь только одно значение. Есле где-то в другом месте в коде написать еще один onchange для этого элемента, то последний перепишет значение предыдущего и первый перестанет работать.
А такой код <элем id="bubu" onchange="код"
эквивалентен этому:
document.getElementById('bubu').onchange = function(){
// код
}
А под функцию, никто не мешает через ;
запихать сколько угодно дополнительных функций. Поэтому ответ на первый вопрос такой:
onchange="document.getElementById('causeWarning').hidden = true; cause(); ещеОдна();"
Но когда-то задолбает редактировать JS в HTML и будет пора всё переносить в скрипт)
И тогда, более удачный вариант, вместо onchange
писать addEventListener('change')
. Тогда где угодно в коде можно добавить на один элемент много одинаковых событий и одно не будет мешать другому.
P.s. примерно год что-то кодю, и впервые встречаю реальный пример, где нужен switch)) И в данном случае, числовые value - условность. Если текст опций в будущем точно не будет меняться, можно вообще убрать value и везде заменить числа на текстовое содержимое опций.
let cause = document.getElementById('cause');
cause.addEventListener('change', function() {
document.getElementById('causeWarning').hidden = true;
autoSelect();
});
function autoSelect() {
switch ( $('#cause').val() ) {
case "1":
$("#causezpzId").val("1");
$('#rectif1zpzId').val("").attr("disabled", true);
$('#rectif2zpzId').val("").attr("disabled", true);
break
case "2":
$("#causezpzId").val("2");
$("#rectif1zpzId").val("1").attr("disabled", false);
$('#rectif2zpzId').val("").attr("disabled", true);
break
case "3":
$("#causezpzId").val("3");
$("#rectif1zpzId").val("2").attr("disabled", false);
$("#rectif2zpzId").val("1").attr("disabled", false);
break
default:
$("#causezpzId").val("")
$('#rectif1zpzId').val("").attr("disabled", false);
$('#rectif2zpzId').val("").attr("disabled", false);
}
}
select {
display: block;
margin: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="causeWarning">Warning!</span>
<select id="cause" name="causeId">
<option value="0"></option>
<option value="1">4.1 А1</option>
<option value="2">4.2 А2</option>
<option value="3">4.3 А3</option>
</select>
<select id="causezpzId" name="causezpzId">
<option value="0"></option>
<option value="1">4.2 Об обеспечении</option>
<option value="2">4.3 О выборе А1</option>
<option value="3">4.4 О выборе А2</option>
</select>
<select id="rectif1zpzId" name="rectif1zpzId">
<option value="0"></option>
<option value="1">3.5.1 обеспечение</option>
<option value="2">3.5.2 о фальсификация</option>
<option value="3">3.5.3 иное</option>
</select>
<select id="rectif2zpzId" name="rectif2zpzId">
<option value="0"></option>
<option value="1">3.6.2.1 нарушение сроков</option>
<option value="2">3.6.2.2 иное</option>
<option value="3">3.7.2.1 возраст </option>
</select>
P.s. хотя, если кол-во опций тоже не будет меняться, можно придумать, как остальные опции зависят от первой и через одно мат-выражение сразу определять, кто-где-как. Не делая switch.
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
На всех страницах сайта все сжимается под размер экрана и отображается нормально(пример на 1 картинке)Но на одной странице контент не подстраивается...
Я работаю сnet mvc core, и хоче реализовать данные о просмотренности форума, т
Есть такой текст: GET /?code=KYTW/9Bjv7m7OhrXmuZd50PuvRq5b4TVi3GIH5ZXOVl59XQL8yMAhuC2IqS7XIsxSQauZA==&state= HTTP/11