jsでカスタマイズしたセレクトボックスを複数設置したい

###前提・実現したいこと
http://webdev.jp.net/selectbox-orisinal-design/
こちらのページを参考にselect要素をカスタマイズしたものを複数設置したいです。

###発生している問題・エラーメッセージ
こちらを複数設置するとひとつ変更すると全て変更されてしまうのですが、どのように記述すればそれぞれが別個に動くようになるのかご教示いただければ幸いです。
初心者で恐縮ですがよろしくお願いいたします。

###ソースコード

html
1<div class="custom-selectbox p01">
2    <div class="inner"><span></span></div>
3    <select name="month">
4        <option value="" selected="selected">--</option>
5        <option value="1">January</option>
6        <option value="2">February</option>
7        <option value="3">March</option>
8    </select>
9</div>
10
11<div class="custom-selectbox p02">
12    <div class="inner"><span></span></div>
13    <select name="month">
14        <option value="" selected="selected">--</option>
15        <option value="1">January</option>
16        <option value="2">February</option>
17        <option value="3">March</option>
18    </select>
19</div>

css
1.custom-selectbox {
2    position: relative;
3}
4    .custom-selectbox select {
5        position: absolute;
6        top: 0;
7        left: 0;
8        z-index: 1;
9        width: 240px;
10        height: 36px;
11        opacity: 0;
12    }
13    .custom-selectbox .inner {
14        position: relative;
15        z-index: 0;
16        box-sizing: border-box;
17        border: 1px solid #000;
18        padding: 0 12px;
19        width: 240px;
20        height: 36px;
21        font-size: 14px;
22        line-height: 36px;
23    }
24    .custom-selectbox .inner:before,
25    .custom-selectbox .inner:after {
26        content: '';
27        position: absolute;
28        display: block;
29    }
30    .custom-selectbox .inner:before {
31        top: 0;
32        right: 0;
33        bottom: 0;
34        width: 24px;
35        background: #000;
36    }
37    .custom-selectbox .inner:after {
38        top: 50%;
39        right: 7px;
40        margin-top: -3px;
41        width: 0;
42        height: 0;
43        border: solid transparent;
44        border-top-color: #fff;
45        border-width: 5px 5px 0 5px;
46    }

javascript
1custom_selectbox = function(select, obj){
2    var set_selectbox = function(){
3        var value = jQuery(this).find('option:selected').html();
4        jQuery(select).find(obj).find('span').html(value);
5    }
6    jQuery(select).find('select').each(set_selectbox).on('change', set_selectbox);
7}
8 
9jQuery(function(){
10    custom_selectbox('.custom-selectbox', '.inner');
11});

行動規範の内容に同意します

回答1件

ベストアンサー

一つ目と二つ目のセレクトボックスで同一のクラス名を使っているのが問題です。
それぞれに異なるクラス名をつけてあげれば個別に動作します。

html
1<div class="custom-selectbox p01">
2    <div class="inner i01"><span></span></div>
3    <select name="month">
4        <option value="" selected="selected">--</option>
5        <option value="1">January</option>
6        <option value="2">February</option>
7        <option value="3">March</option>
8    </select>
9</div>
10
11<div class="custom-selectbox p02">
12    <div class="inner i02"><span></span></div>
13    <select name="month">
14        <option value="" selected="selected">--</option>
15        <option value="1">January</option>
16        <option value="2">February</option>
17        <option value="3">March</option>
18    </select>
19</div>

javascript
1custom_selectbox = function(select, obj){
2    var set_selectbox = function(){
3        var value = jQuery(this).find('option:selected').html();
4        jQuery(select).find(obj).find('span').html(value);
5    }
6    jQuery(select).find('select').each(set_selectbox).on('change', set_selectbox);
7}
8 
9jQuery(function(){
10    // 一つ目のセレクトボックス
11    custom_selectbox('.p01', '.i01');
12    // 二つ目のセレクトボックス
13    custom_selectbox('.p02', '.i02');
14});

※ 追記

セレクトボックスの数が多く汎用的に使える方法をご希望とのことでしたので、
セレクトボックスそれぞれにクラス名(もしくはID)を割り振らないで済む方法を追記します。

html
1<div class="custom-selectbox">
2    <div class="inner"><span>--</span></div>
3    <select name="month">
4        <option value="" selected="selected">--</option>
5        <option value="1">January</option>
6        <option value="2">February</option>
7        <option value="3">March</option>
8    </select>
9</div>
10
11<div class="custom-selectbox">
12    <div class="inner"><span>--</span></div>
13    <select name="month">
14        <option value="" selected="selected">--</option>
15        <option value="1">January</option>
16        <option value="2">February</option>
17        <option value="3">March</option>
18    </select>
19</div>

javascript
1function change_selectbox(select) {
2    var item = select.children('option:selected').text();
3    select.prev('.inner').find('span').text(item);    
4}
5
6jQuery(function(){
7    // セレクトボックスの変更時に.innerのspanを書き換え
8    jQuery('select').change(function() {
9        change_selectbox(jQuery(this));
10    });
11});