Подтвердить что ты не робот

Как использовать onClick() или onSelect() в теге опций на странице JSP?

Как использовать onClick() или onSelect() с тегом option? Ниже мой код, в котором я пытался реализовать это, но он работает не так, как ожидалось.

Примечание: где listCustomer список объектов домена, попадающих на страницу JSP.

<td align="right"> 
  <select name="singleSelect" "> 
     <c:forEach var="Customer" items="${listCustomer}" >
     <option value="" onClick="javascript:onSelect(this);> <c:out value="${Customer}" /></option>
                </c:forEach>
          </select>         
        </td>

Как изменить его, чтобы определить, что выбран параметр?

4b9b3361

ОТВЕТЫ

Ответ 1

Ни onSelect(), ни onClick() события поддерживаются тегом <option>. Первый относится к выбору текста (т.е. Нажав + перетаскивание по текстовому полю), поэтому его можно использовать только с тегами <text> и <textarea>. Событие onClick() может использоваться с тегами <select> - однако вы, вероятно, ищете функциональность, где было бы лучше использовать onChange(), а не onClick().

Кроме того, при взгляде тэгов <c:...> вы также пытаетесь использовать синтаксис JSP в простом HTML-документе. Это просто... неверно.

В ответ на ваш комментарий к этому ответу - я едва могу это понять. Однако, похоже, что вы хотите получить значение тега <option>, который пользователь только что выбрал, когда он его выбирает. В этом случае вы хотите иметь что-то вроде:

<html>
 <head>
  <script type="text/javascript">

   function changeFunc() {
    var selectBox = document.getElementById("selectBox");
    var selectedValue = selectBox.options[selectBox.selectedIndex].value;
    alert(selectedValue);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" onchange="changeFunc();">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>
 </body>
</html>

Ответ 2

Еще более упрощено: вы можете напрямую передать атрибут значение!

<html>
 <head>
  <script type="text/javascript">

   function changeFunc($i) {
    alert($i);
   }

  </script>
 </head>
 <body>
  <select id="selectBox" onchange="changeFunc(value);">
   <option value="1">Option #1</option>
   <option value="2">Option #2</option>
  </select>
 </body>
</html>

Предупреждение будет либо возвращать 1, либо 2.

Ответ 3

Ответ, который вы дали выше, работает, но он запутан, потому что вы дважды использовали два имени, и у вас есть лишняя строка кода. вы делаете процесс, который не нужен.

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

если вы сделаете это с помощью приведенного ниже кода, вы увидите, что

var selectBox = document.getElementById("selectBox");

помещается в коробку и остается там, после чего вы ничего не делаете.

и

var selectBox = document.getElementById("selectBox");

трудно отлаживать и запутывает, когда у вас есть идентификатор select для selectBox для списка опций. ---- which selectBox вы хотите манипулировать /query/etc, это локальный var selectBox, который исчезнет или это идентификатор selectBox, который вы назначили тегу select

ваш код работает до тех пор, пока вы его не добавите или не измените, тогда вы можете легко потерять трек и все перемешать.

<html>
<head>
<script type="text/javascript">

function changeFunc() {
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}

</script>
</head>

<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

работает более компактный способ:

<html>
<head>
<script type="text/javascript">

function changeFunc() {

var selectedValue = selectBox.options[selectBox.selectedIndex].value;
alert(selectedValue);
}

</script>
</head>
<body>
<select id="selectBox" onchange="changeFunc();">
<option value="1">Option #1</option>
<option value="2">Option #2</option>
</select>
</body>
</html>

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

<script type="text/javascript">

function Mapit(){

var actualPostcode=getPostcodes.options[getPostcodes.selectedIndex].value;

alert(actualPostcode);

// alert is for debugging only next we go on to process and do something
// in this developing program it will placing markers on a map

}

</script>

<select id="getPostcodes" onchange="Mapit();">

<option>London North Inner</option>

<option>N1</option>

<option>London North Outer</option>

<option>N2</option>
<option>N3</option>
<option>N4</option>

// a lot more options follow 
// with text in options to divide into areas and nothing will happen 
// if visitor clicks on the text function Mapit() will ignore
// all clicks on the divider text inserted into option boxes

</select>

Ответ 4

 <div class="form-group">
         <script type="text/javascript"> 
              function activa(){                                                            
                 if(v==0)
                     document.formulario.vr_negativo.disabled = true; 
                 else if(v==1)
                      document.formulario.vr_negativo.disabled = true; 
                 else if(v==2)
                      document.formulario.vr_negativo.disabled = true; 
                 else if(v==3)
                      document.formulario.vr_negativo.disabled = true; 
                 else if(v==4)
                      document.formulario.vr_negativo.disabled = true; 
                 else if(v==5)
                      document.formulario.vr_negativo.disabled = true; 
                 else if(v==6)
                      document.formulario.vr_negativo.disabled = false;}                                                   
        </script> 
        <label>&iquest;Qu&eacute; tipo de veh&iacute;culo est&aacute; buscando?</label>
        <form name="formulario" id="formulario">
          <select name="lista" id="lista" onclick="activa(this.value)"> 
              <option value="0">Vehiculo para la familia</option> 
              <option value="1">Vehiculo para el trabajo</option> 
              <option value="2">Camioneta Familiar</option> 
              <option value="3">Camioneta de Carga</option> 
              <option value="4">Vehiculo servicio Publico</option>
              <option value="5">Vehiculo servicio Privado</option>
              <option value="6">Otro</option>
          </select> 
          <br />
          <input type="text" id="form vr_negativo" class="form-control input-xlarge" name="vr_negativo"/>
        </form>
  </div>

Ответ 5

Другой вариант для аналогичного примера, но с анонимированными выделениями, подумайте, что у вас есть два выбора, имя первого - "ea_pub_dest", а второе имя - "ea_pub_dest_2", ok, теперь нажмите на событие сначала и отобразите второй.

<script>

function test()
{
    value = document.getElementById("ea_pub_dest").value;
    if ( valor == "value_1" )
        document.getElementById("ea_pub_dest_nivel").style.display = "block";
}
</script>

Ответ 6

Если вам нужно изменить значение другого поля, вы можете использовать это:

<input type="hidden" id="mainvalue" name="mainvalue" value="0">
<select onChange="document.getElementById('mainvalue').value = this.value;">
<option value="0">option 1</option>
<option value="1">option 2</option>
</select>

Ответ 7

Вы можете изменить выбор в функции

window.onload = function () {
  var selectBox = document.getElementById("selectBox");
  selectBox.addEventListener('change', changeFunc);
  function changeFunc() {
    alert(this.value);
  }
}
<!DOCTYPE html>
<html>
  <head>
    <title>Selection</title>
  </head>
  <body>
    <select id="selectBox" onChange="changeFunc();">
      <option> select</option>
      <option value="1">Option #1</option>
      <option value="2">Option #2</option>
   </select>
  </body>
</html>

Ответ 8

Измените onClick() с помощью onChange() в. Вы можете отправить значение параметра в функцию javascript.

<select id="selector" onChange="doSomething(document.getElementById(this).options[document.getElementById(this).selectedIndex].value);"> 
<option value="option1"> Option1 </option>
<option value="option2"> Option2 </option>
<option value="optionN"> OptionN </option>
</select>

Ответ 9

в этом примере тег select имеет имя: aula_clase_cb

<select class="form-control" id="aula_clase_cb" >
</select>

document.getElementById("aula_clase_cb").onchange = function(e){
    id = document.getElementById('aula_clase_cb').value;
    alert("id: "+id);
};