在选择特定选项时无法使用 jquery 显示 div

Question

这是在 head 标签中

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

这是在body

<select name="product" id="product">
<option value="1">Select Your Product</option>    
<option value="2">On Grid</option>
<option value="3">Off Grid</option>
<option value="4">Solar Water Pump [Irrigation]</option>    
<option value="5">Solar Water Heater </option>    
<option value="6">Online UPS </option>    
<option value="7">Residential UPS</option>
<option value="8">Generator Replacement Lifts Inverter </option>
<option value="9">Energy Efficient LED'S </option>
<option value="10">Powerplant IMC Leizning with ESCOMs</option>
<option value="11">Online UPS Installation </option> 
    </select>
 <input type="file" name="file_attach[]"  />

这是我保存在 body

之外的脚本

      <script type="text/javascript">
  $(document).ready(function() {
    $("#product").change(function() {

      if ($("#product option[value='2']").attr('selected')) {
         $('.file_attach').css('display','block');

      }
        else{
        $('.file_attach').css('display','none');
        }
    }); 
  });
</script>

当我select一个问题时它被隐藏了。

Answer 1

使用.val()得到选择的值

$("#product").change(function () {
    if ($(this).val() == "2") {
        $('.file_attach').css('display', 'block');
    } else {
        $('.file_attach').css('display', 'none'); 
    }
});

并将 class 添加到元素

<input type="file" name="file_attach[]" class="file_attach" />

$("#product").change(function() {
  if ($(this).val() == "2") {
    $('.file_attach').css('display', 'block');
  } else {
    $('.file_attach').css('display', 'none');
  }
});

.file_attach {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product">
    <option value="1">Select Your Product</option>    
    <option value="2">On Grid</option>
    <option value="3">Off Grid</option>
    <option value="4">Solar Water Pump [Irrigation]</option>    
    <option value="5">Solar Water Heater </option>    
    <option value="6">Online UPS </option>    
    <option value="7">Residential UPS</option>
    <option value="8">Generator Replacement Lifts Inverter </option>
    <option value="9">Energy Efficient LED'S </option>
    <option value="10">Powerplant IMC Leizning with ESCOMs</option>
    <option value="11">Online UPS Installation </option> 
</select>
<input type="file" name="file_attach[]" class="file_attach" />

Answer 2

您需要将 class 添加到输入字段：

<input type="file" name="file_attach[]" class="file_attach" />

Answer 3

试试这个，

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>



            <select name="product" id="product">
    <option value="1">Select Your Product</option>    
    <option value="2">On Grid</option>
    <option value="3">Off Grid</option>
    <option value="4">Solar Water Pump [Irrigation]</option>    
    <option value="5">Solar Water Heater </option>    
    <option value="6">Online UPS </option>    
    <option value="7">Residential UPS</option>
    <option value="8">Generator Replacement Lifts Inverter </option>
    <option value="9">Energy Efficient LED'S </option>
    <option value="10">Powerplant IMC Leizning with ESCOMs</option>
    <option value="11">Online UPS Installation </option> 
        </select>
     <input type="file" name="file_attach[]" class="file_attach" />



          <script type="text/javascript">
      $(document).ready(function() {
        $("#product").change(function() {
           
          if ($("#product").val() == "2") {
             $('.file_attach').css('display','block');
              
          }
            else{
            $('.file_attach').css('display','none');
            }
        }); 
      });
    </script>

Answer 4

3 个变化：

使用 .val() 函数获取 select 元素的值
将 file_attach class 附加到输入元素
最初隐藏输入。

$(document).ready(function() {
  $("#product").change(function() {
    if ($("#product").val() === "2") {
      $('.file_attach').css('display', 'block');

    } else {
      $('.file_attach').css('display', 'none');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="product" id="product">
<option value="1">Select Your Product</option>    
<option value="2">On Grid</option>
<option value="3">Off Grid</option>
<option value="4">Solar Water Pump [Irrigation]</option>    
<option value="5">Solar Water Heater </option>    
<option value="6">Online UPS </option>    
<option value="7">Residential UPS</option>
<option value="8">Generator Replacement Lifts Inverter </option>
<option value="9">Energy Efficient LED'S </option>
<option value="10">Powerplant IMC Leizning with ESCOMs</option>
<option value="11">Online UPS Installation </option> 
    </select>
<input type="file" class="file_attach" style="display:none" name="file_attach[]" />

在选择特定选项时无法使用 jquery 显示 div

Unable to show the div using jquery on selecting particular option

html

javascript

css

jquery

html-select