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

Question

我不是程序员，也不是脚本编写者。我真的可以使用一些知道这些来龙去脉的人的帮助......

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

我想要发生的是访问者看到州的下拉菜单，当他们选择州时，会调出为其州（地区）编码的经销商

我正在使用wordpress，可以轻松添加自定义CSS和Java，但我不知道我需要做些什么来使这项工作。

我目前陷入困境：http://norvellpro.com/?page_id=2947

下拉操作无效，所以我知道这是一个脚本问题。

任何帮助都非常受欢迎！

克里斯蒂·斯图尔特 krististewart @ att dot net

Answer 1

试试这个 的 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);
    });
});

Answer 2

要触发更改的选择框的ID为“state_list”。您需要在页面中添加一些Javascript：

document.getElementById('state_list') = function() {
   ... change the HTML of the distributors div here ...
}

如果可能，您应该在state_list元素之后包含此Javascript。这将导致它在创建该元素后运行，这是它工作所必需的。如果这不可能，您可以将此代码设置为在document.onload上运行的函数，该函数在加载所有元素后执行。