Как показать/скрыть div на основе идентификатора выбранного параметра?

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

вот мой JavaScript:

<script> 
    $(document).ready(function() { 
     $("#select1").change(function(event) { 
      var id = $(event.target).id(); 

      $("#" + id).show(); 
     }); 
    }); 
</script>

здесь моя форма:

<form name="invoice" action="invoice.php"> 
    <table border="1"> 
    <tr> 
     <td>SN</td> 
     <td>Vahicle Type</td> 
     <td>Quantity</td> 
    </tr> 


     <?php $sn = 1 ; 
     while ($sn < 5){ ?> 

    <tr> 
     <td> 
      <?php echo $sn ?> 
     </td> 
     <td> 
       <select name="vehicles[]" id="select1"> 
        <option id="0" value="0">Select Vehicle</option> 
        <option id="<?php echo $sn ?>" value="toyota" name="toyota">Toyota</option> 
        <option id="<?php echo $sn ?>" value="nissan" name="nissan">Nissan</option> 
        <option id="<?php echo $sn ?>" value="BMW" name="bmw">BMW</option> 
        <option id="0" value="plane" name="plane">Plane</option> 
        <option id="0" value="boat" name="boat">Boat</option> 
        <option id="0" value="bike" name="bike">Bike</option> 

       </select>  

      <div id="<?php echo $sn ?>" class="toggleable" style="display:none;"> 
       <select name="color[]" id="select2"> 
        <option id="<?php echo $sn ?>" value="red" name="red">Red</option> 
        <option id="<?php echo $sn ?>" value="black" name="black">Black</option> 
        <option id="<?php echo $sn ?>" value="white" name="white">White</option>   
       </select>  
      </div> 

     </td> 

     <td> 
      <input type="number" name="quantity[]"> 
     </td> 
    </tr> 

      <?php $sn=$sn+1; } ?> 
</table> 
</form>

им не так хорошо с JavaScript. Я написал этот код, изучая онлайн-примеры, но не работал.

источник

2015-08-09 user1362473

'event.target' является' select' элемент, использовать его значение вместо 'id's вариантов. – Teemu

Чтобы получить значение выбранного параметра атрибута «ID» с помощью JQuery, вы можете использовать следующий JQuery фрагмент

var id = $("#select1 > option:selected").attr('data-id');

в действии: http://plnkr.co/edit/bWj0MzLey0n4dkI03bs1?p=preview

Запрос здесь просто получает вас выбранный вариант с помощью селектора «: selected» (https://api.jquery.com/category/selectors/).

Однако, как видно из примера, вы должны использовать другое имя атрибута для тегов параметров, например. «data-id», поскольку «id» имеет свою цель.

источник

2015-08-09 12:40:53

Это действительно неэффективный способ сделать 'this.id'. Но OP (правильно или неправильно) после идентификатора выбранного параметра, а не элемента выбора, который имеет слушатель, и, следовательно, будет * this * внутри функции. – RobG

var id = $ (this) .attr ('id'); Я сделал это, но все еще не работал. я должен использовать id опциона, поскольку есть 5 строк, и выбор каждой строки может быть другим. id div основан на номере строки. – user1362473

@RobG - прав, я понимаю намерение OP сейчас. Отредактировал мой ответ. –

Как указано в tomas_b, для этого вы должны использовать атрибут данных - *. Идентификаторы элементов должны быть уникальными в документе, если вы их дублируете, тогда getElementById вернет только первый (в основном).

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

Таким образом, вы могли бы сделать что-то вроде:

window.onload = function() { 
 
    document.getElementById('select1').onchange = handleVehicleChange; 
 
} 
 

 
function handleVehicleChange() { 
 
    var opt = this.options(this.selectedIndex); 
 
    document.getElementById('carTypes').style.display = opt.getAttribute('data-type') == 'car'? '' : 'none'; 
 
}

 <select name="vehicles[]" id="select1"> 
 
     <option id="0" value="0" selected>Select Vehicle</option> 
 
     <option data-type="car" value="toyota">Toyota</option> 
 
     <option data-type="car" value="nissan">Nissan</option> 
 
     <option data-type="car" value="BMW">BMW</option> 
 
     <option data-type="aeroplane" value="plane">Plane</option> 
 
     <option data-type="boat" value="boat">Boat</option> 
 
     <option data-type="bike" value="bike">Bike</option> 
 
    </select>  
 

 
    <div id="carTypes" class="toggleable" style="display:none;"> 
 
     <select name="color[]" id="select2"> 
 
     <option value="red">Red</option> 
 
     <option value="black">Black</option> 
 
     <option value="white">White</option>   
 
     </select> 
 
    </div>

источник

2015-08-09 22:27:17 RobG

Как показать/скрыть div на основе идентификатора выбранного параметра?

ответ

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