JavaScript: установите / снимите флажок в зависимости от выбора выпадающего меню - PullRequest
Новая
       2

JavaScript: установите / снимите флажок в зависимости от выбора выпадающего меню

0 голосов
/ 26 октября 2011

Я пытаюсь установить флажок, чтобы отметить себя, если выбран элемент раскрывающегося списка. Например, если в раскрывающемся списке выбрана «Запись 0», я хочу установить флажок «0 выбран». Кроме того, если выбрана запись, отличная от «Запись 0», я хочу, чтобы флажок «0 был выбран» не отмечен. Код, который у меня есть, использует 2 пункта выпадающего меню и 2 соответствующих флажка. В настоящее время работает только флажок 1, и он не снимается при выборе другого раскрывающегося элемента.

Я часами искал в сети и гугле и не могу найти решение. Я новичок в JavaScript, но нужно это для онлайн-формы. (Как только я пойму, как работает это решение, я смогу поместить его в свою онлайн-форму.) 

<body>
<script language="JavaScript">
function onChange() {
   if (document.formName3.selectName3 = 'Entry 0')
 //{ alert("Option changed")
{ document.formName3.c_0.checked = true;
 document.formName3.c_1.checked = false;
}
  else if (document.formName3.selectName3 = 'Entry 1')
 //{ alert("Option changed")
{document.formName3.c_1.checked = true;
 document.formName3.c_0.checked = false;
 }}
{ alert("Begin")
 document.formName3.c_1.checked = true;
}
</script>

<form
  name="formName3" id="formName3"
  onSubmit="return false;"
>
  <p>
  <select
  name="selectName3"
  onChange="onChange()"
>
    <option
  value="Option 0" selected="selected"
>
      Entry 0
      <option
  value="Option 1"
>
      Entry 1
    </select>


  <p>
    <input name="c_0" type="checkbox" id="c_0" />
    <label for="c_0">0 Is selected</label>
  </p>
  <p>
    <input name="c_1" type="checkbox" id="c_1" />
    <label for="c_1">1 Is selected</label>
  </p>
</form>
</body>
    </html>

Можете ли вы дать мне знать, как заставить его работать, пожалуйста? Как только я пойму, как это сделать, я могу применить его в качестве функции к моей онлайн-форме. Спасибо !!!

Ответы [ 4 ]

1 голос
/ 26 октября 2011

Здесь есть пара проблем.

Следующее условие будет выполняться при каждом выполнении, потому что вы используете один знак равенства вместо двух. (= вместо ==). При сравнении значений всегда нужно использовать два знака равенства. 

if (document.formName3.selectName3 = 'Entry 0')

Во-вторых, способ, которым вы пытаетесь найти значение текущей выбранной опции, неверен. Вместо: 

document.formName3.selectName3

Вы можете использовать следующее: 

document.formName3.selectName3.options[document.formName3.selectName3.selectedIndex].value

Есть много других способов, но это приемлемо.

Чтобы объединить эти два предложения, код теперь становится: 

function onChange() {
    var selectValue = document.formName3.selectName3.options[document.formName3.selectName3.selectedIndex].value;
    if (selectValue == 'Entry 0') { 
        document.formName3.c_0.checked = true;
        document.formName3.c_1.checked = false;
    } else if (selectValue == 'Entry 1') {
        // ... ;
    }
}

Вот еще немного информации:

http://www.mredkj.com/tutorials/tutorial002.html

0 голосов
/ 26 октября 2011

Этот код делает то, что вы хотите: 

<html>
    <body>
        <script type="text/javascript">
            function onChange() {
                var selectBox = document.formName3.selectName3;
                var val = selectBox.value;
                i = 0;
                while(document.formName3["c_" + (i++)]) 
                    document.formName3["c_" + (i++)].checked = false;

                document.formName3["c_" + val].checked = true;
            }
        </script>

        <form name="formName3" id="formName3" onSubmit="return false;">
            <p>
                <select name="selectName3" onChange="onChange()">
                    <option value="0" selected="selected">Entry 0</option>
                    <option value="1">Entry 1</option>
                </select>
            </p>
            <p>
                <input name="c_0" type="checkbox" id="c_0" />
                <label for="c_0">0 Is selected</label>
            </p>
            <p>
                <input name="c_1" type="checkbox" id="c_1" />
                <label for="c_1">1 Is selected</label>
            </p>
        </form>
    </body>
</html>

Некоторые указатели, которые помогут вам выучить:

Текущее значение поля выбора получается с помощью selectBox.value. Это значение равно содержанию value текущей выбранной опции.

Функция сначала снимает все флажки, используя несколько функций javascript. Обратите внимание на цикл while. Что это делает:

A. Если существует элемент с именем document.formName3["c_" + (i++)], который прямо эквивалентен document.formName3.c_0, установите его значение в false.

B. Увеличивает i на один.

C. Повторяется до тех пор, пока i не станет равным 2, после чего он не сможет найти такой флажок и остановится.

После того, как все флажки сняты, установлен соответствующий флажок.

Еще одно последнее замечание: в javascript вы можете получить доступ к свойствам объектов, используя синтаксис скобок. Это означает, что object1.property1 прямо эквивалентно object1["property1"].

Ура, и я надеюсь, что это поможет.

0 голосов
/ 26 октября 2011 
if (document.formName3.selectName3 = 'Entry 0')

Это присваивание, а не проверка на равенство. Используйте == или ===.
В приведенном выше коде первый if всегда оценивается как true. 

document.formName3.selectName3

Возвращает элемент DOM, а не значение.
Чтобы получить выбранное значение из поля выбора, выполните: 

var index = document.formName3.selectName3.selectedIndex;
var selectedValue = document.formName3.selectName3.options[ index ].value;

Если у вас много опций и флажков, код станет довольно обширным и трудным для поддержки. Возможно, вы захотите использовать такую ​​библиотеку, как jQuery или Prototype.

0 голосов
/ 26 октября 2011

Начните с превращения всех ваших символов «=» в «===» в ваших условиях «если». 

if ( foo === bar ){
 <<do something>>
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...