1

I am not a programmer by any means and no very little about scripting. I could really use some help from someone who knows the ins and outs...

I am trying to recreate the actions on the following page: http://www.redkensalon.com/distributor-locator/

What I would like to happen is for the visitor to see the drop-down menu of states, when they select their state, it brings up the distributors coded for their state (region)

I am using wordpress and can easily add custom CSS and Java but I don't know what I need to do to make this work.

I am currently stuck at this point: http://norvellpro.com/?page_id=2947

The drop down action is just not functioning so I know it is a scripting issue.

Any help is GREATLY APPRECIATED!

Kristi Stewart krististewart @ att dot net

4

2 回答 2

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);
    });
});
于 2013-08-14T06:48:04.043 回答
0

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

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

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

于 2013-08-14T06:39:18.563 回答