動的に生成したselectでeasySelectBoxが正しく動作しない。

前提・実現したいこと

csvを読み込んで、動的にselectを生成しています。
生成したselectをeasySelectBoxでスタイリングし、
selectを変更したときに、非表示になっているselectのindexとTXTを取得して、
$.grepを用いて、選択された値を反映させたいです。

発生している問題・エラーメッセージ

macのsafariでセレクトが効いておりません。

該当のソースコード

javascript
1// JavaScript Document
2※宣言系は省略します。
3var KEYS = ["item0","item1","item2","item3","item4","item5","item6","item7","item8","item9"];
4$.get(csvfile,function(data){
5var csv = $.csv.toArrays(data);
6var itemlist = '';
7var target = '#csv-body';
8var insert = '';
9itemTable = csv.slice();
10
11for(var i=0, l=csv.length; i<l;i++ ){
12var obj = {};
13$.each(csv[i],function(idx,val){ obj[KEYS[idx]] = val; });
14item.push(obj);
15}
16}).always(function(){
17let n=0;
18for(i in item[0]){ n++; }
19tab = n;//項目数を算出
20cols = (itemTable.length/tab);
21//console.table(item);
22$(itemTable).each(function(){
23if (this.length > 0) {
24if( genre1.indexOf(this[0]) == -1){ genre1 += this[0] + '|'; }
25/*～略～*/
26if( genre9.indexOf(this[8]) == -1){ genre9 += this[8] + '|'; }
27}
28})
29var counter = function(str,seq){ return str.split(seq).length - 1; }
30///画面表示1抽出。
31let gen1 = counter(genre1,'|');
32let temp1 = [];
33for(i=0;gen1>i;i++){temp1 = genre1.split('|');};row0Table = temp1.filter(function(e){return e !== "";});
34///画面表示2抽出。
35let gen2 = counter(genre2,'|');
36let temp2 = [];
37for(i=0;gen2>i;i++){  temp2 = genre2.split('|'); };row1Table = temp2.filter(function(e){return e !== "";});
38let numberRow2 = 0;
39let numLoop2 = (row1Table.length - 1);
40function addH2(){
41let numberRow = 0;
42let numLoop = (row0Table.length - 1);
43for(var i=1;row0Table.length>i;i++){
44let op = document.createElement('section');
45let hd2 = document.createElement('h2');
46let st = document.createElement('strong');
47hd2.className = 'sec1';
48op.className = 'item1_' + i;
49hd2.innerHTML = '<span><strong>' + row0Table[i] + '</span></strong>';
50op.appendChild(hd2);
51let t = row0Table[i];
52$('.a01_sec').append(op);
53let esDl = '<dl class="' + 'item1_' + i + '"><dt>'+ row0Table[i] + '</dt><dd class="tl"></dd><dd class="sp"></dd><dd class="mon"></dd></dl>';
54$('#restable').append(esDl);
55}}
56function addH3(){ $('h2.sec1').each(function(){ let t = $(this).text();
57var hoge = $.grep(item, function(elem, index) { return (elem['item0'] == t && elem['item3'] == '1 '); });
58for(var g = hoge.length -1 ; -1 < g;g--){ let hd3 = document.createElement('h3'); let txt = hoge[g]['item1']; hd3.innerHTML = txt; $(this).after(hd3); }
59var txt = document.createElement('p');
60})
61}
62function addDiv(){
63var subOp;
64$('article.a01_sec h3').each(function(){
65let t = $(this).text();
66let p = $(this).prevAll('h2').text();
67var hoge2 = $.grep(item,
68function(elem, index) { return (elem['item0'] == p && elem['item1'] == t); }
69);
70subOp = '<div class="rows fs"><p class="fm_caution">';
71var txt2;
72$(this).after(subOp);})
73}
74function addDL(bb){
75let rows = bb.parents('.rows');
76let t = rows.prevAll('h3').eq(0).text();
77let p = rows.prevAll('h2').text();
78let hoge3 = $.grep(item,
79function(elem, index) { return (elem['item0'] == p && elem['item1'] == t); }
80);
81var dv = $('<div></div>', { 'class' : 'ro', 'data-name' : t });
82var sl = $('<select></select>',{
83'class' : 'selectH4 design-select-box'
84}).on('change',function(){
85cSelect(this)
86});
87var op2 = $('<option></option>',{ val : '0', text : 'お選びください' }).appendTo(sl);
88//費用の受け渡し
89let mDl = $('<dl></dl>',{ 'class' : 'monthCost' });
90let mDt = $('<dt></dt>',{ text : '月' });
91let mDd = $('<dd><span>0</span></dd>');
92let iDl = $('<dl></dl>',{ 'class' : 'initialCost' });
93let iDt = $('<dt></dt>',{ text : '基本' });
94let iDd = $('<dd><span>0</span></dd>');
95mDl.append($(mDt));
96iDl.append($(iDt));
97
98for(var e=0;hoge3.length>e;e++){
99let op2 = document.createElement('option');
100op2.value = e + 1;op2.text = hoge3[e]['item4'];sl.append(op2);
101if(0==e){iDd.innerHTML = '<span>0</span>';iDl.append(iDd);
102mDd.innerHTML = '<span>0</span>';mDl.append(mDd);}
103}
104dv.append(sl);dv.append(iDl);dv.append(mDl);
105let sl3 = $('<select></select>',{'class' : 'design-select-box'});
106let above = '';let z = rows.find('.ro').length;
107let adovT = 'attribute';let numberD = 'number';
108
109let nDl = $('<dl></dl>',{ 'class' : 'numberCount' });
110let nDt = $('<dt></dt>',{  text : '数量' });nDl.append(nDt);
111let nDd = $('<dd></dd>');
112for(var f=1;11>f;f++){let op3 = document.createElement('option');op3.value = f;op3.text = f;sl3.append(op3);}
113nDd.append(sl3);nDl.append(nDd);dv.append(nDl);
114bb.before(dv);}
115function addBtn(){let p = '<p class="add"><input type="button" value="行を追加"></p>';return p;}
116
117$(window).on('load',function(){addH2();   addH3();   addDiv();$('.rows').append(addBtn);
118var i = true;
119$('.add').each(function(){addDL($(this));});
120i = false; $('.design-select-box').easySelectBox({ onClick: function (data) {var selectObj = $(this).data('easySelectData').selectObj;selectObj.trigger('change');}});});
121var flug = true;
122function cSelect(cc){
123let parentDivsRow = $(cc).parents('div.rows');
124let parentH2 = $(parentDivsRow).prevAll('h2');
125let parentH3 = $(parentDivsRow).prevAll('h3').eq(0);
126let parenDiv = $(cc).parents('div.ro');
127let dd = $(parenDiv).find('dd span');
128dd.text('');
129$(parenDiv).find('.vmCount dd input').val('');
130$(parenDiv).find('.termCount dd option:first').prop('selected', true);
131$(parenDiv).find('.numberCount dd option:first').prop('selected', true);
132let n = cc.selectedIndex;
133let t = cc[n].innerText;
134console.log(n);
135if(n ==0){
136$(parenDiv).find('.monthCost dd').html('<span>0</span>');
137$(parenDiv).find('.initialCost dd').html('<span>0</span>');
138calcs2();
139}else {
140let hoge3 = $.grep(item,
141function(elem, index) {return (elem['item0'] == parentH2.text() && elem['item1'] == parentH3.text() && elem['item4'] == t);}
142);
143$(parenDiv).find('.monthCost dd').html('<span>' + hoge3[0]['item6'] +'</span>');
144$(parenDiv).find('.initialCost dd').html('<span>' + hoge3[0]['item5'] +'</span>');
145}
146calcs2(); label($(cc));
147}
148$(document).on('change','.numberCount select',function(){
149let parentDivsRow = $(this).parents('div.rows');
150let parentH2 = $(parentDivsRow).prevAll('h2');
151let parentH3 = $(parentDivsRow).prevAll('h3');
152let parentH4 = $(this).parents('.numberCount').prevAll('.selectH4').find(':selected');
153let n = this.selectedIndex;
154let t = this[n].innerText;
155let hoge4 = $.grep(item,
156function(elem, index) {return (elem['item0'] == parentH2.text() && elem['item1'] == parentH3.text() && elem['item4'] == parentH4.text());})
157calcs2(); label($(this));
158});
159$(document).on('blur','.vmCount dd input',function(){ calcs2(); label($(this)); })
160$(document).on('change','.termCount select',function(){ calcs2(); label($(this)); })
161$(document).on('click','.add',function(){
162let parentDivsRow = $(this).parents('div.rows');
163let n = $(parentDivsRow).find('div.ro').length;
164if(n<10){
165addDL($(this));
166$(this).prev('div.ro').find('.design-select-box').easySelectBox({
167onClick: function (data) {var selectObj = $(this).data('easySelectData').selectObj;
168selectObj.trigger('change');}
169});
170}else {  $(this).addClass('hiden');  }
171})
172})
173function calcs2(){
174var ind = 0;var mon = 0;var tolI = 0;var tolM = 0;var h2Table;
175for(var i = 0; $('#restable dt').length>i;i++){
176m1.push($('#restable dl').eq(i).attr('class'));
177m2.push($('#restable dt').eq(i).text());
178}
179let initialC = 0;let monthC = 0;let conT = 1;
180for(var i =0;m1.length>i;i++){
181h2Table = $('.a01_sec').find('.' + m1[i]).find('.ro');
182for(var m = 0;h2Table.length>m;m++){let vmc = $(h2Table).eq(m).find('.vmCount');
183
184if(0<vmc.length){
185let el = $(h2Table).eq(m).find('.termCount');
186vmc = $(vmc).find('input').val();
187if(0<el.length){ tc = $(el).find(':selected').text(); conT = tc * vmc }else { conT = vmc; }
188}else { conT = $(h2Table).eq(m).find('.numberCount :selected').text(); }
189initialC = $(h2Table).eq(m).find('.initialCost span').text();
190initialC = parseFloat(initialC.replace(/,/g, ''));
191ind += conT * initialC;
192monthC = $(h2Table).eq(m).find('.monthCost span').text();
193monthC = parseFloat(monthC.replace(/,/g, ''));
194mon += conT * monthC;
195}
196$('#restable').find('.' + m1[i]).find('.mon').text(mon);
197$('#restable').find('.' + m1[i]).find('.sp').text(ind);
198$('#restable').find('.' + m1[i]).find('.tl').text(String(ind+mon).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,'));
199mon = 0;ind = 0;
200}
201$('#restable .sp').each(function(){ tolI += parseFloat($(this).text()); })
202$('#restable .mon').each(function(){ tolM += parseFloat($(this).text()); })
203let hidIn = '<input type="hidden" name="XXXX" value="'+tolI+'">';
204let hidMn = '<input type="hidden" name="XXXX" value="'+tolM+'">';
205tolI = String(tolI).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
206tolM = String(tolM).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
207$('.restableTable .hid').html(hidIn + hidMn);
208$('.allInitial dd').text(tolI);
209$('.allMonth dd').text(tolM);
210}

試したこと

consoleでselectの値を確認した。
onClickを試した。

https://qiita.com/lynrin/items/8b2de9f105f6c5d977fd

m.ts10806

2018/11/13 14:47

インデント全くなくて非常に読みづらく、また不具合の温床となり得ます。ご調整ください

hironaka-dev

2018/11/13 14:51

ご指摘ありがとうございます。。。文字数制限のため、苦肉の策で取ってしまいました。自己解決方法に貼れるか試してみます。

m.ts10806

2018/11/13 14:55

そこまで長くなるのでしたら仕方ないですが、外部サービスを利用されては。それかもう少し関係のあるところだけを切り取るとか

hironaka-dev

2018/11/13 15:01

すみません、、、インデント取れてしまいました。。。また、明朝試してみます。。

m.ts10806

2018/11/13 21:23

回答は削除依頼出しておいてくださいね。

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

回答1件

自己解決

一部抜粋。
function addDiv(){
var subOp;
$('article.a01_sec h3').each(function(){
let t = $(this).text();
let p = $(this).prevAll('h2').text();
var hoge2 = $.grep(item,
function(elem, index) {
return (elem['item0'] == p && elem['item1'] == t);
}
);
})
}
function addDL(bb){//行を追加した時。
let rows = bb.parents('.rows');
let t = rows.prevAll('h3').eq(0).text();
let p = rows.prevAll('h2').text();
//console.log(t+'と'+p);
let hoge3 = $.grep(item,
function(elem, index) {
return (elem['item0'] == p && elem['item1'] == t);
}
);
var dv = $('<div></div>', { 'class' : 'ro', 'data-name' : t });
var sl = $('<select></select>',{
'class' : 'selectH4 design-select-box'
});
var op2 = $('<option></option>',{ val : '', text : 'お選びください' }).appendTo(sl);
//費用の受け渡し
let mDl = $('<dl></dl>',{ 'class' : 'monthCost' });
let mDt = $('<dt></dt>',{ text : '月' });
let mDd = $('<dd><span>0</span></dd>');

            let iDl = $('<dl></dl>',{ 'class' : 'initialCost' });
            let iDt = $('<dt></dt>',{ text : '基本' });
            let iDd = $('<dd><span>0</span></dd>');
            mDl.append($(mDt));
            iDl.append($(iDt));
            for(var e=0;hoge3.length>e;e++){
                let op2 = document.createElement('option');
                op2.value = hoge3[e]['item4'];
                op2.text = hoge3[e]['item4'];
                sl.append(op2);
                if(0==e){
                    iDd.innerHTML = '<span>0</span>';
                    iDl.append(iDd);
                    mDd.innerHTML = '<span>0</span>';
                    mDl.append(mDd);
                }
            }
            dv.append(sl);
            dv.append(iDl);
            dv.append(mDl);
            

            let sl3 = $('<select></select>',{ 'class' : 'design-select-box' });
            let above = '';
            let z = rows.find('.ro').length;
            let adovT = 'attribute';
            //console.log(z);
            let numberD = 'number';
            

                    let nDl = $('<dl></dl>',{ 'class' : 'numberCount'  });
                    let nDt = $('<dt></dt>',{  text : '数量' });
                    nDl.append(nDt);
                    let nDd = $('<dd></dd>');
                    for(var f=1;11>f;f++){
                        let op3 = document.createElement('option');
                        op3.value = f;
                        op3.text = f;
                        sl3.append(op3);
                    }
                    nDd.append(sl3);
                    nDl.append(nDd);
                    dv.append(nDl);


            let inpHid = document.createElement('input');
            inpHid.type = 'hidden';
            inpHid.name = name0 + adovT + z;
            inpHid.value = '';
            name1++;
            //console.log(name1);
            dv.append(inpHid);
            

            bb.before(dv);
    }
    $(window).on('load',function(){
        addH2(); addH3(); addDiv();
        
        $('.rows').append(addBtn);
        var i = true;
        $('.add').each(function(){  addDL($(this)); });
        i = false;
        $('.design-select-box').easySelectBox({ onClick: function (data) {
                var selectObj = $(this).data('easySelectData').selectObj;
                selectObj.trigger('change'); }
        });
    });
    $(document).on('change','select.selectH4',function(){
        flug = true;
        $('.foot_price').removeClass('oddHide');

        let parentDivsRow = $(this).parents('div.rows');
        let parentH2 = $(parentDivsRow).prevAll('h2');
        let parentH3 = $(parentDivsRow).prevAll('h3').eq(0);
        let parenDiv = $(this).parents('div.ro');
        let dd = $(parenDiv).find('dd span');
        dd.text('');
        $(parenDiv).find('.vmCount dd input').val('');
        $(parenDiv).find('.termCount dd option:first').prop('selected', true);
        $(parenDiv).find('.numberCount dd option:first').prop('selected', true);
        let n = this.selectedIndex;
        let t = this[n].innerText;
        if(n ==0){
            $(parenDiv).find('.monthCost dd').html('<span>0</span>');
            $(parenDiv).find('.initialCost dd').html('<span>0</span>');
            calcs2();
        }else {
        let hoge3 = $.grep(item,
                function(elem, index) {
                    return (elem['item0'] == parentH2.text() && elem['item1'] == parentH3.text() && elem['item4'] == t);
                }
            );
            $(parenDiv).find('.monthCost dd').html('<span>' + hoge3[0]['item6'] +'</span>');
            $(parenDiv).find('.initialCost dd').html('<span>' + hoge3[0]['item5'] +'</span>');
        }
        calcs2();
        label($(this));
    });

投稿2018/11/13 14:59

hironaka-dev

総合スコア16

hironaka-dev

2018/11/20 11:37

easyselectboxの記述の問題でした。以下の記述に替えることで解決しました。 // 修正 //options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()}); options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()}); （中略） // 修正 //options.onClick.call(this, {'value':selectObj.val(), 'text':selectObj.find('option').eq(index).html()}); options.onClick.call(this, {'value':selectObj.find('option').eq(index).attr('value'), 'text':selectObj.find('option').eq(index).html()}); （中略） // 修正 //selectedOption.attr('selected','selected'); selectedOption.prop({selected:true});

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