Javascript 基于下拉选择显示div_Javascript_Jquery

Javascript 基于下拉选择显示div

javascript jquery

Javascript 基于下拉选择显示div,javascript,jquery,Javascript,Jquery,我想基于两个下拉选择显示div。例如，如果用户选择宽度=7.00M，长度=20.0M，我想显示宽度值为7.0，长度的所有div。您可以使用以下逻辑过滤父div并显示/隐藏它 $（函数（）{ $（“#表单字段宽度，#表单字段长度”）.on（'change'，function（）{ var width=$（“#表单字段宽度”）.val（）； var length=$（“#表单字段长度”）.val（）； //console.log（宽度+“”+长度）； $（'.myle'）.hide（）； $（'.

我想基于两个下拉选择显示div。例如，如果用户选择宽度=7.00M，长度=20.0M，我想显示宽度值为7.0，长度的所有div。您可以使用以下逻辑过滤父div并显示/隐藏它

$（函数（）{
$（“#表单字段宽度，#表单字段长度”）.on（'change'，function（）{
var width=$（“#表单字段宽度”）.val（）；
var length=$（“#表单字段长度”）.val（）；
//console.log（宽度+“”+长度）；
$（'.myle'）.hide（）；
$（'.myle'）.filter（函数（）{
var first=$（this.find（'p:first'）.text（）；
var last=$（this.find（'p:last'）.text（）；
//console.log（第一个+“”+最后一个）；
如果（第一个索引of（宽度）>=0）{
var value=parseFloat（last.replace（'Length-'，''）| | 0；
//console.log（值）；
if（parseFloat（长度）>=值）{
返回true；
}
}
返回false；
}).show（）；
});
});
div{
背景色：#F4；
宽度：130px；
浮动：左；
利润率：20px 20px；
}
#表单字段宽度{
右边距：30px；
}

请选择包
选择尺寸：
6.20米
6.57米
7.10米
9.42米
10.00米
25.70米
24.22米
21.00米
13.73米
21.15米



根据您对宽度和长度的选择，以下是软件包
包1
宽度-6.20M
长度-25.70米
方案2
宽度-6.57米
长度-24.22米
方案3
宽度-7.10米
长度-21.00M
方案4
宽度-9.42米
长度-13.73米
方案5
宽度-10.00M
长度-21.15米
以下是一个简单的示例，其中包含一个select和onchange事件：
 <html>
    <body>
    <style>
    div {
    background-color: #f4f4f4;
    width:130px;
    float:left;
    margin: 20px 20px;
    }
    #form-field-width {
        margin-right: 30px;
    }
      .package{
        display: none;
      }
    </style>
    
    <h1>Please select the package</h1>
    
    <form action="/action_page.php">
      <label for="dimensions">Choose Dimensions:</label>
     <select name="form_fields[width]" id="form-field-width" class="" required="required" aria-required="true">
       <option value="">-----</option>
     <option value="package1">6.20M</option>
     <option value="package2">6.57M</option>
     <option value="package3">7.10M</option>
     <option value="package4">9.42M</option>
      <option value="package5">10.00M</option>
     </select>
        <br><br>
      <input id="submit" type="button" value="Submit">
    </form>
    
    <p>Based on your selection of width and length, here are the packages.</p>
      
    <div class="package" id="package1">
    <p>Package 1</p>
    <p>Width - 6.20M</p>
    <p>Length - 25.70M</p>
    </div>
    
    <div class="package" id="package2">
    <p>Package 2</p>
    <p>Width - 6.57M</p>
    <p>Length - 24.22M</p>
    </div>
    
    <div class="package" id="package3">
    <p>Package 3</p>
    <p>Width - 7.10M</p>
    <p>Length- 21.00M</p>
</div>

<div class="package" id="package4">
<p>Package 4</p>
<p>Width - 9.42M</p>
<p>Length - 13.73M</p>
</div>

<div class="package" id="package5">
<p>Package 5</p>
<p>Width - 10.00M</p>
<p>Length - 21.15M</p>
</div>

</body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</html>

你的js脚本在哪里？您是否尝试在“提交”按钮上添加事件，并检查所选值是否==xxM$（'packageX'）。show（）并使用.hide（）隐藏其他事件。“我已经尝试了很长时间，但无法实现所需的输出。”-请包括您以前的尝试。感谢您的帮助。我已经实施了您的解决方案，它正在按预期工作。干杯。很高兴帮助你：），如果你觉得有用，你可以投票接受这个答案。谢谢你的帮助。谢谢你的朋友。
$('#form-field-width').change(function(){ 
    var value = $(this).val();
  if(value){
$(".package").hide()
  $("#"+value).show()
  }else $(".package").hide()
  
});