Скрыть динамически созданный элемент (php и html) с Javascript

Question

У меня есть div, который извлекает данные из базы данных с помощью PHP и присоединяет информацию к элементам html.

<?php 
$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC"); 
if (!empty($product_array)) { 
    foreach($product_array as $key=>$value){ 
?> 
    <div class="product-item"> 
     <form method="post" action="index.php?action=add&code=<?php echo $product_array[$key]["code"]; ?>"> 
      <div class="product-image"><img src="<?php echo $product_array[$key]["image"]; ?>"></div> 
      <div><strong><?php echo $product_array[$key]["name"]; ?></strong></div> 
      <div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div> 

У меня 3 различные числа входных (GRS, килограммы, pzas) и DropDownList, чтобы выбрать, какой из них следует использовать.

<div class="cantidad"> 
       <input class="medida" id="grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
       <input class="medida" id="kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
       <input class="medida" id="pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99"onkeydown="return false" /> 
       <select id="cd-dropdown" class="cd-select" onchange="medidas()"> 
        <option value="grs">grs</option> 
        <option value="kgs">kgs</option> 
        <option value="pzas">pzas</option> 
       </select> 
      </div> 

И я попытался скрыть два других ввода номера с помощью javascript, но не работает по желанию.

$(function() { 
       $('#cd-dropdown').dropdown(); 
      }); 

     function medidas() 
     { 
      var tipo = document.getElementById('cd-dropdown').value; 
      if(tipo=='grs') 
      { 
       document.getElementById('grs').style.visibility = 'visible'; 
       document.getElementById('kgs').style.visibility = 'hidden'; 
       document.getElementById('pzas').style.visibility = 'hidden'; 
      } 
      else if(tipo=='kgs') 
      { 
       document.getElementById('grs').style.visibility = 'hidden'; 
       document.getElementById('kgs').style.visibility = 'visible'; 
       document.getElementById('pzas').style.visibility = 'hidden'; 
      } 
      else if(tipo=='pzas') 
      { 
       document.getElementById('grs').style.visibility = 'hidden'; 
       document.getElementById('kgs').style.visibility = 'hidden'; 
       document.getElementById('pzas').style.visibility = 'visible'; 
      } 
     } 

Я хочу, пользователь может выбрать один вариант из списка, а затем правый вход должен быть видны, а другие 2 должны быть скрыты.

See here

Answer 1

Я удалил атрибут выпадающего списка onchange. Обработчик события будет добавлен вместо .addEventListener().

Это также использует некоторые ES6 "волшебство" (let, arrow functions (=>), Array.from())

let select = document.querySelector("#cd-dropdown"), 
 
    inputs = Array.from(document.querySelectorAll(".cantidad>input.medida")); 
 

 
select.addEventListener("change", medidas, false); 
 
medidas.call({ "value": select.value }); // "fake" a change event 
 

 
function medidas(e) { 
 
    inputs.forEach(i => { 
 
    i.style.visibility = (i.id === this.value ? "visible" : "hidden"); 
 
    }); 
 
}

<div class="cantidad"> 
 
    <input class="medida" id="grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida" id="kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida" id="pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select id="cd-dropdown" class="cd-select"> 
 
     <option value="grs">grs</option> 
 
     <option value="kgs">kgs</option> 
 
     <option value="pzas">pzas</option> 
 
    </select> 
 
</div>

Update

"но меняет все входы во всех продукты "

Итак, есть несколько элементов <div class="cantidad">...</div>?
Затем вам нужно изменить идентификаторы на классы, потому что идентификаторы должны быть уникальными.

let selects = Array.from(document.querySelectorAll(".cd-select")); 
 

 
selects.forEach(select => { 
 
    select.addEventListener("change", medidas, false); 
 
    medidas.call(select); // "fake" a change event 
 
}); 
 

 
function medidas() { 
 
    let inputs = Array.from(this.parentNode.querySelectorAll("input.medida")) 
 

 
    inputs.forEach(i => { 
 
    i.style.visibility = (i.classList.contains(this.value) ? "visible" : "hidden"); 
 
    }); 
 
}

<div class="cantidad"> 
 
    <input class="medida grs" type="number" name="gramos" step="50" value="50" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida kgs" type="number" name="kilogramos" step=".5" value=".5" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida pzas" type="number" name="unidades" step="1" value="1" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select class="cd-select"> 
 
    <option value="grs">grs</option> 
 
    <option value="kgs">kgs</option> 
 
    <option value="pzas">pzas</option> 
 
    </select> 
 
</div> 
 
<div class="cantidad"> 
 
    <input class="medida grs" type="number" name="gramos" step="50" value="20" size="1" min="50" max="950" onkeydown="return false" /> 
 
    <input class="medida kgs" type="number" name="kilogramos" step=".5" value=".2" size="2" min=".5" max="99" onkeydown="return false" /> 
 
    <input class="medida pzas" type="number" name="unidades" step="1" value="2" size="2" min="1" max="99" onkeydown="return false" /> 
 
    <select class="cd-select"> 
 
    <option value="grs">grs</option> 
 
    <option value="kgs">kgs</option> 
 
    <option value="pzas">pzas</option> 
 
    </select> 
 
</div>

Answer 2

$.each($(".medida"), function() { 
    $(this).prop("hidden", $(this).prop("id") != tipo); 
}) 

Вы хотите шкуры элемент, который устанавливает в HTML Attr, который отличается от Наладка CSS visibility свойства.

EDIT: Благодаря @Andreas для указания неправильного селектора.

EDIT2: Измените код для динамического ввода hidden.