使用非 ID/Class 数据类型隐藏 Div 基于 select 框

Question

是否可以根据 select 框的值隐藏 DIV（select 框没有唯一 ID 或 class）。我能看到的唯一可能以它为目标的独特方式是它有 'Data-type="location"'

<div class="bookly-form-group" data-type="location"><label>Location</label> <div><select><option value="0">Select location</option><option value="3">A Club</option><option value="4">B Club</option><option value="1">C Club</option><option value="6">Mobile Hire</option></select></div> </div>

在上面的下拉代码中，如果用户 select 的“移动租用”，它应该显示下面粘贴的 DIV...否则 DIV 应该是隐藏。

<div class="bookly-form-group" data-type="duration"><label>Duration</label> <div><select><option value="3">3 h (£120.00)</option><option value="4">4 h (£160.00)</option><option value="5">5 h (£200.00)</option><option value="6">6 h (£240.00)</option><option value="7">7 h (£280.00)</option><option value="8">8 h (£320.00)</option></select></div> </div>

Answer 1

你想实现的是通过下面的代码完成的：

//First Import JQuery CDN, then Following Code inside a script tag

$(document).ready(function () {
  $('div[data-type="location"] select').on('change' , (function () {
      $('div[data-type="duration"]').hide();
  }));
});

希望这可以帮助！

Answer 2

已更新代码，这应该可以工作：

 //initially hide duration div
 $('div[data-type="duration"]').hide();

 $('div[data-type="location"] select').on('change' ,(function () {
    var value = $('div[data-type="location"] select option:selected').text();
    if(value === "Mobile Hire") {
        $('div[data-type="duration"]').show();
    }
    else {
        $('div[data-type="duration"]').hide();
    }
  }));

使用非 ID/Class 数据类型隐藏 Div 基于 select 框

Hide Div based on select box using data-type not ID/Class

javascript

jquery