Question

我有以下下拉列表：

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>

在此之下，我有以下div：

<div class="singer_profile_overview" id="toni">...</div>
<div class="singer_profile_overview" id="jack">...</div>
<div class="singer_profile_overview" id="james">...</div>

这些设置为使用css

显示：none

当我从下拉列表中选择名称时，我试图这样做，＃34;可见＆＃34;添加到相应的div中 - 如果再次更改选择，则再次删除。

这是我到目前为止所尝试过的，但没有运气：

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
       $('#'(this).val()).addClass('visible');  
    });
});

Answer 1

我将如何做到这一点：

HTML：

<select name="about_performance_lead_singer" id="about_performance_lead_singer" value="">
    <option value="nothing">Select One</option>
    <option value="Toni">Toni</option>
    <option value="Jack">Jack</option>
    <option value="James">James</option>        
</select>
<div class="singer_profile_overview" id="Toni">toni</div>
<div class="singer_profile_overview" id="Jack">jack</div>
<div class="singer_profile_overview" id="James">james</div>

jquery的：

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
    var $this = $(this);   
    $('.singer_profile_overview').removeClass('visible');
    $('#' + $this.val()).addClass('visible');  
    });
});

几个笔记：

最好将$(this)存储在本地变量中，我通常将其称为$this。
您的原始代码中存在大写/小写问题。要更新的类的id需要与您在选择器中调用的ID匹配
在应用之前从每个visible删除<div>课程。
还有一个问题，如果您单击下拉列表并选择第一个选项，则事件将不会触发，因为没有任何更改。这就是为什么我添加了“选择一个”选项。

这是一个fiddle。

Answer 2

试试这个。您还需要将值转换为function getSelected() { return $scope.operations_publish.filter(function (x,i) { return $scope.operations[i] }); }以获得完全匹配。

lowerCase()

示例：http://jsfiddle.net/RxguB/204/

Answer 3

使用class StoreB { constructor() { dispatcher.register((action) => { switch(action.type) { case 'ACTION1': dispatcher.waitFor([storeADispatchToken]); //how to get the dispatchToken from Store A... break; } }); } } export default new StoreB();选择器查找所选的选项。我们可以通过调用:selected方法并将prop作为属性传递来获取其价值。由于我们尝试获取的ID是小写的，因此我们使用value方法。

我们想要得到的div是班级toLowerCase()。我们应该使用.singer_profile_overview函数来获取ID。我们将这个过滤器的结果存储在一个jQuery变量中，最后为它添加一个类。

filter

$("#about_performance_lead_singer").change(function () {
       var selectedValue = $(":selected").prop("value").toLowerCase();
       var selectedDiv = $(".singer_profile_overview").filter(function() {
           return $(this).prop("id") == selectedValue;
       });
       selectedDiv.addClass('visible');  
    });

.visible {
    color: gold;
}

Answer 4

这是因为下拉列表的值是大写的，而您的id是小写的。请考虑以下事项：

jQuery(document).ready(function($){ 
$("#about_performance_lead_singer").change(function () {
       $('#'(this).val().toLowerCase()).addClass('visible');  
    });
});

或者，您可以手动将值更改为小写，或者将id更改为大写以匹配值。

Answer 5

回答问题：

$("#about_performance_lead_singer").on("change", function(){
    $(".singer_profile_overview").removeClass("visible");
    $("#" + $(this).val().toLowerCase()).addClass("visible");
});

但是，如果您只使用“可见”类来切换显示，则可以替换

removeClass("visible")

带

hide()

和

addClass("visible")

带

show()

addClass to div on下拉选择的更改

5 个答案: