javascript - 在使用下拉选择列表更改页面上的动态内容方面需要帮助

无论如何，我都不是程序员，关于脚本的工作也不少。我真的可以从知道来龙去脉的人那里得到一些帮助...

我试图在以下页面上重新创建操作：http://www.redkensalon.com/distributor-locator/

我想让访客看到州的下拉菜单，当他们选择州时，它会调出按州（地区）编码的分销商

我使用的是wordpress，可以轻松添加自定义CSS和Java，但是我不知道要执行此操作需要做什么。

我目前停留在这一点：http://norvellpro.com/?page_id=2947

下拉操作仅不起作用，因此我知道这是脚本问题。

任何帮助是极大的赞赏！

克里斯蒂·斯图尔特
krististewart @ att点网

最佳答案

尝试这个
http://jsfiddle.net/cEb9y/1/

的HTML

<select name="state_list" id="state_list">
<option value="">Select State</option>
<option value="distributor_alaska">AK &ndash; Alaska</option>
<option value="distributor_alabama">AL &ndash; Alabama</option>
</select>

<div id="distributor_alaska" class="statediv" >
    alaska
</div>

<div id="distributor_alabama" class="statediv" >
    alabama
</div>

JS

$(document).ready(function(){
    $('.statediv').hide();

    $('#state_list').change(function(){
         var state = $(this).val();
         if(!state) $('statediv').hide();

         var div= $('#' + state );
         div.removeClass('statediv');
         $('.statediv').hide();
         div.addClass('statediv');

         if ( !div.is(':visible') ) div.fadeIn(500);
    });
});