Javascript - Отключить элементы выбора на основе выбранного варианта

Я создаю простую форму с двумя элементами выбора. Каждый из двух элементов выбора имеет некоторые параметры и в этих опциях некоторые значения. Первый выбор с идентификатором «средний» имеет пять вариантов. Второй с идентификатором «сумма» имеет три варианта. Я бы хотел, если бы пользователь выбрал из «среднего» вариант, который имеет значение «D», чтобы отключить все параметры из «суммы» и только быть доступным для выбора, параметр со значением «30 ». Я что-то пробовал, но он не работает. Надеюсь, кто-то может помочь с этой проблемой.Javascript - Отключить элементы выбора на основе выбранного варианта

Благодаря

HTML

<form action="#" method="post"> 
     <select id="average"> 
      <option value="A">A</option> 
      <option value="B">B</option> 
      <option value="C">C</option> 
      <option value="D" id="special">D</option> 
      <option value="E">E</option> 
     </select> 

     <select id="amount"> 
      <option value="10">10</option> 
      <option value="20">20</option> 
      <option value="30" id="onlyAmount">30</option> 
     </select> 
    </form>

JavaScript

var myAverage = document.querySelector("#average"); 
var mySpecial = document.querySelector("#special"); 
var myAmount = document.querySelector("#amount"); 
var onlyAmount = document.querySelector("#onlyAmount"); 


if(mySpecial.value.selected) { 
    for (var i = 0; i < myAmount.children.length; i++) { 
     myAmount[i].disabled = true; 
    } 
    onlyAmount.disabled = false; 
}

источник

2017-02-05 pro78

То, что вы делаете, прекрасно, за исключением того, что вы делаете это слишком рано. Вы хотите запустить свой код *, когда пользователь взаимодействует с первым выпадающим меню *. Вы слышали о [событиях DOM] (https://developer.mozilla.org/en-US/docs/Web/Events/change) раньше? – Touffy

Спасибо за ур ответить @Touffy, как бы у вас это сработало? – pro78

Извините, это не значит, что это должно работать;) вы читаете документацию, даете ей попробовать и * если вам все еще нужна помощь *, тогда вы публикуете здесь лучший вопрос, и мы с радостью помогаем. – Touffy

<html> 
 
<head> 
 
</head> 
 
<body> 
 
\t <form action="#" method="post"> 
 
     <select id="average"> 
 
      <option value="A">A</option> 
 
      <option value="B">B</option> 
 
      <option value="C">C</option> 
 
      <option value="D" id="special">D</option> 
 
      <option value="E">E</option> 
 
     </select> 
 

 
     <select id="amount"> 
 
      <option value="10">10</option> 
 
      <option value="20">20</option> 
 
      <option value="30" id="onlyAmount">30</option> 
 
     </select> 
 
    </form> 
 
\t <script type="text/javascript"> 
 
\t (function(){ 
 
\t \t var myAverage = document.querySelector("#average"); 
 
\t \t var mySpecial = document.querySelector("#special"); 
 
\t \t var myAmount = document.querySelector("#amount"); 
 
\t \t var onlyAmount = document.querySelector("#onlyAmount"); 
 

 

 
\t \t myAverage.addEventListener('change', function(){ 
 
\t \t \t debugger; 
 
\t \t \t if(myAverage.value === 'D') { 
 
\t \t \t \t myAmount.value = ""; 
 
    \t \t \t for (var i = 0; i < myAmount.children.length; i++) { 
 
     \t \t \t myAmount[i].disabled = true; 
 
    \t \t \t } 
 
    \t \t \t onlyAmount.disabled = false; 
 
\t \t \t }else{ 
 
\t \t \t \t for (var i = 0; i < myAmount.children.length; i++) { 
 
     \t \t \t myAmount[i].disabled = false; 
 
    \t \t \t } 
 
\t \t \t } \t \t \t 
 
\t \t }) 
 
\t })(); 
 
\t </script> 
 
</body> 
 
</html>

Вот рабочий Plunkr

https://plnkr.co/edit/gXW4azAqKPWwsrUoNwak?p=preview

Надеется, что это помогает

источник

2017-02-05 08:43:26

спасибо, что кодирование ur - это то, что я хотел. Ура !!! – pro78

Использование addEventListener для проверки выбора пользователем нового элемента из выпадающего списка. Затем вы можете вызвать функцию для применения логики к вашему исходному коду.

var myAverage = document.querySelector("#average"); 
 
var mySpecial = document.querySelector("#special"); 
 
var myAmount = document.querySelector("#amount"); 
 
var onlyAmount = document.querySelector("#onlyAmount"); 
 

 
myAverage.addEventListener('change', analyseUserSelection); 
 

 
function analyseUserSelection(e) { 
 
    if (mySpecial.selected) { 
 
    for (var i = 0; i < myAmount.children.length; i++) { 
 
     myAmount[i].disabled = true; 
 
    } 
 
    onlyAmount.disabled = false; 
 
    } 
 

 
}

<form action="#" method="post"> 
 
    <select id="average"> 
 
    <option value="A">A</option> 
 
    <option value="B">B</option> 
 
    <option value="C">C</option> 
 
    <option value="D" id="special">D</option> 
 
    <option value="E">E</option> 
 
    </select> 
 

 
    <select id="amount"> 
 
    <option value="10">10</option> 
 
    <option value="20">20</option> 
 
    <option value="30" id="onlyAmount">30</option> 
 
    </select> 
 
</form>

источник

2017-02-05 08:31:37

Спасибо @Robin Mackenzie за ур ответ ur код работает. Более того, когда я выбираю опцию со значением «D», опция «сумма» отключается, как ожидалось. Однако, когда я меняю его на любой из других вариантов «среднего», опции «сумма» также отключены. Я бы хотел, только если для параметра «D» выбрана опция со значением «D», чтобы отключить опции в «количестве» и сохранить опцию со значением «30». – pro78

OK - хорошо известно, что вы знаете, что можете подключить событие, которое вы можете реализовать, добавив дополнительную логику для других вещей, о которых вы говорите .... это хороший этикет, чтобы не добавлять дополнительные требования после того, как кто-то ответил на ваш вопрос :) –

ok @ Robin Mackenzie Еще раз спасибо за помощь! – pro78

Javascript - Отключить элементы выбора на основе выбранного варианта

ответ

Смежные вопросы