Question

我想根据jQuery / JavaScript选择的值只显示一个div id a OR b ，就像所选值是s-license然后div id a ，并隐藏 b ，如果选择的值为电子许可，则应显示 b 且 a 应该隐藏，我希望你理解我的意思，抱歉我的英语不好。

<select class="form-control" name="attribute_pa_license" id="uniqueid">
<option value="s-license" class="attached enabled">S License</option>
<option value="e-license" class="attached enabled">E License</option>

<div id="a">Some Text</div> <div id="b">Some Text</div>

Answer 1

为了更好，方法 您可以使用data-attribute来实现它。

1.将data-value属性添加到div中，并添加相应的选择框选项值。

2.初始隐藏div（$('div').hide();）。（这将隐藏页面上的所有div，以便更好地使用div的公共类并使用该类隐藏特定的div）

3.在选择框更改中将所选值与相应div的data-value进行比较并显示它们。

工作代码段： -

$('div').hide(); // initially hide divs
$('div[data-value='+ $('#uniqueid').val()+']').show(); // initially show the selected option corresponding div
$('#uniqueid').change(function(){ // on select-box change
  $('div').hide(); // first hide div
  $('div[data-value='+ $(this).val()+']').show(); // based on option value check which div data-value matched, just show that div only
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="attribute_pa_license" id="uniqueid">
<option value="s-license" class="attached enabled">S License</option>
<option value="e-license" class="attached enabled">E License</option>
</select>
<div data-value="s-license" id="a">Some Text</div><!-- add data attribute to div and give corresponding option values in it-->
<div data-value="e-license" id="b">Some Text2</div><!-- add data attribute to div and give corresponding option values in it-->

注意： - 如果您无法更改HTML，请执行以下操作： -

$('div').hide();
$('div').eq($('#uniqueid option:selected').index()).show();
$('#uniqueid').change(function(){
  $('div').hide();
  $('div').eq($('#uniqueid option:selected').index()).show();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="attribute_pa_license" id="uniqueid">
<option value="s-license" class="attached enabled">S License</option>
<option value="e-license" class="attached enabled">E License</option>
</select>
<div data-value="s-license" id="a">Some Text</div><!-- add data attribute to div and give corresponding option values in it-->
<div data-value="e-license" id="b">Some Text2</div><!-- add data attribute to div and give corresponding option values in it-->

Answer 2

如果您想在旅途中添加更多选项，这将是一种正确的方法。

您可以在选项标签上添加“数据目标”，以指定选择时显示的div

$(function(){
//Hide all the divs with a specific class
$('.showOnSelect').hide();
//Show the div corresponding to the selected option
$($('#uniqueid option:selected').data('target')).show();

$('#uniqueid').change(function(){
//Again do the same as above. This time use the option selected right now
$('.showOnSelect').hide();
$($(this).find('option:selected').data('target')).show();
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="attribute_pa_license" id="uniqueid">
<option value="s-license" data-target="#a" class="attached enabled">S License</option>
<option value="e-license" data-target="#b" class="attached enabled">E License</option>
<option value="s-license" data-target="#c" class="attached enabled">T License</option>
<option value="e-license" data-target="#d" class="attached enabled">Y License</option>
</select>
<div id="a" class="showOnSelect">Some Text a</div>
<div id="b" class="showOnSelect">Some Text b</div>
<div id="c" class="showOnSelect">Some Text c</div>
<div id="d" class="showOnSelect">Some Text d</div>

Answer 3

我希望你的意思是这样的：

$("select[name='attribute_pa_license']").on('change', function(e){
    if(this.value == "s-license"){
        ("div#a").show();
        ("div#b").hide();
    } else {
        ("div#a").hide();
        ("div#b").show(); 
    }
}

Answer 4

我会稍微更新标记以帮助轻松隐藏/显示，例如

<div class="conditional s-license">Some Text</div>
<div class="conditional e-license">Some Text</div>

在JS中

$('#uniqueid').on('change', function(){
  const value = $(this).val();
  $('.conditional').hide();
  $('.'+value).show();
});

Answer 5

我使用数据属性和Alive To Die一样，但是使用vanilla JS，并在元素classLists中添加和删除类。

1）抓住select和divs（我在元素中添加了div类。）

2）向选择中添加change侦听器。

3）在handleChange函数中从所选选项中获取值，循环删除show类的div，然后将show类添加到具有将data-value属性匹配为选项值。

＆＃13;

const select = document.querySelector('select');
const divs = document.querySelectorAll('.div');

select.addEventListener('change', handleChange, false);

function handleChange(e) {
  const value = e.target.options[e.target.selectedIndex].value;
  divs.forEach(div => div.classList.remove('show'));
  document.querySelector(`.div[data-value=${value}]`).classList.add('show');
}

＆＃13;

.div {
  display: none;
}

.show {
  display: block;
}

＆＃13;

<select class="form-control" name="attribute_pa_license" id="uniqueid">
<option value="">---</option>
<option value="s-license" class="attached enabled">S License</option>
<option value="e-license" class="attached enabled">E License</option>
</select>

<div class="div" data-value="s-license">Some Text</div>
<div class="div" data-value="e-license">Some Other Text</div>

＆＃13;

Answer 6

您可以使用.val（）ex：

在选择中获取所选的选项值

if($('.form-control').val()=='s-license')
    $('#a').addClass('hide');

Answer 7

使用没有任何依赖关系的简单JavaScript方法

你试试这个功能

function licenseFunction(element) {
let value = element.options[element.selectedIndex].value,
    a = document.getElementById('a'),
    b = document.getElementById('b');
if(value === 's-license'){
  a.style.display = 'block';
  b.style.display = 'none';
} else {
  b.style.display = 'block';
  a.style.display = 'none';
} }

演示 - demo

Answer 8

您可以在下拉列表中使用Javascript的Onchange事件。调用一个函数，你可以写入hide＆amp;使用jquery显示div的逻辑和相应的id。

Answer 9

创建option值和div s的地图，然后隐藏全部并在change事件中显示所选

var valDivMap = {
  "s-license" : "a",
  "e-license" : "b"
};
$("#uniqueid").change(function(){
   Object.values(valDivMap).forEach( s => $("#" + s).hide() )
   $("#" + valDivMap[$(this).val()]).show();
});

<强>演示

＆＃13;

var valDivMap = {
  "s-license" : "a",
  "e-license" : "b"
};
$("#uniqueid").change(function(){
   Object.values(valDivMap).forEach( s => $("#" + s).hide() )
   $("#" + valDivMap[$(this).val()]).show();
});

＆＃13;

#b {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="attribute_pa_license" id="uniqueid">
  <option value="s-license" class="attached enabled">S License</option>
  <option value="e-license" class="attached enabled">E License</option>
</select>
<div id="a">Some Text a</div>
<div id="b">Some Text b</div>

＆＃13;

如何添加和删除具有所选选项值的类

9 个答案: