无法使用jQuery正确地将<option>添加到<select>

时间:2016-06-06 06:36:59

标签: javascript jquery html

我有简单的HTML代码并动态添加一些&lt; li&gt; #place使用此代码的元素 &#13; &#13; $(function(){&#13;     select = document.querySelector(&#34;选择[name =&#39; selected-seats&#39;]&#34;);&#13;     var settings = {&#13;         行:4,&#13;         cols:12,&#13;         rowCssPrefix:&#39; row - &#39;,&#13;         colCssPrefix:&#39; col - &#39;,&#13;         seatWidth:45,&#13;         seatHeight:45,&#13;         seatCss:&#39; seat&#39;,&#13;         selectedSeatCss:&#39; selectedSeat&#39;,&#13;         chooseSeatCss:&#39; chooseSeat&#39;&#13;     };&#13; &#13;     var init = function(reservedSeat){&#13;         var str = [],seatNo,className;&#13;         for(i = 0; i&lt; settings.rows; i ++){&#13;             for(j = 0; j&lt; settings.cols; j ++){&#13;                 seatNo =(i + j * settings.rows + 1);&#13;                 className = settings.seatCss +&#39; &#39; + settings.rowCssPrefix + i.toString()+&#39; &#39; + settings.colCssPrefix + j.toString();&#13;                 if($ .isArray(reservedSeat)&amp;&amp; $ .inArray(seatNo,reservedSeat)!= -1){&#13;                     className + =&#39; &#39; + settings.selectedSeatCss;&#13;                 }&#13;                 str.push(&#39;&lt; li class =&#34;&#39; + className +&#39;&#34;&#39; +&#13;                 &#39;式=&#34;顶部:&#39; +(i * settings.seatHeight).toString()+&#39; px; left:&#39; +(j * settings.seatWidth).toString()+&#39; px&#34;&gt;&#39; +&#13;                 &#39;&lt; a title =&#34;&#39; + seatNo +&#39;&#34;&gt;&#39; + seatNo +&#39;&lt; / a&gt;&#39; +&#13;                 &#39;&LT; /立GT;&#39;);&#13;             }&#13;         }&#13;         $(&#39;#地方&#39;)HTML(str.join(&#39;&#39;));&#13;     }; &#13;     的init();&#13; &#13;     $(&#39;。&#39; + settings.seatCss).click(function(){&#13;         if($(this).hasClass(s​​ettings.selectedSeatCss)){&#13;             提醒(&#39;此座位已预留&#39;);&#13;         }&#13;         否则{&#13;             var str = [],item;&#13;             $ .each($(&#39; #place li。&#39; + settings.selectedSeatCss +&#39; a,#place li。&#39; + settings.selectingSeatCss +&#39; a&#39; ),功能(索引,价值){&#13;                     &#13;                 var option = document.createElement(&#34; option&#34;);&#13;                     &#13;                 option.value = str.push($(this).attr(&#39; title&#39;));; &#13;                 option.text = str.push($(this).attr(&#39; title&#39;));;&#13;                 option.selected =&#39; selected&#39;;&#13;                 select.appendChild(可选);&#13;             });&#13;                 &#13;             $(本).toggleClass(s​​ettings.selectingSeatCss);&#13;         }&#13;     });&#13; &#13;     $(&#39;#btnShow&#39;)。click(function(){&#13;         var str = [];&#13;         $ .each($(&#39; #place li。&#39; + settings.selectedSeatCss +&#39; a,#place li。&#39; + settings.selectingSeatCss +&#39; a&#39; ),功能(索引,价值){&#13;             str.push($(本).attr(&#39;标题&#39;));&#13;         });&#13;         警报(str.join(&#39;&#39));&#13;     })&#13; &#13;     $(&#39;#btnShowNew&#39;)。click(function(){&#13;         var str = [],item;&#13;         $ .each($(&#39; #place li。&#39; + settings.selectingSeatCss +&#39; a&#39;),函数(索引,值){&#13;             item = $(this).attr(&#39; title&#39;); &#13;             str.push(项目); &#13;         });&#13;         警报(str.join(&#39;&#39));&#13;     })&#13; });&#13;     #holder {&#13;       高度:200像素; &#13;       宽度:550px;&#13;       背景色:#F5F5F5;&#13;       边框:1px solid#A4A4A4;&#13;       保证金左:10px的; &#13;     }&#13;     #place {&#13;       位置:相对;&#13;       余量:7px的;&#13;     }&#13;     #place a {&#13;       字体大小:0.6em;&#13;     }&#13;     #place li {&#13;       list-style:none without none;&#13;       位置:绝对; &#13;     }&#13;     #place li:hover {&#13;       背景颜色:黄色; &#13;     }&#13;     #place .seat {&#13;       background:url(&#34; img&#34;)no-repeat scroll 0 0 transparent;&#13;       高度:33px;&#13;       宽度:33px;&#13;       显示:块; &#13;     }&#13;     #place .selectedSeat {&#13;       背景图像:网址(&#34; IMG&#34); &#13;     }&#13;     #place .selectingSeat {&#13;       背景图像:网址(&#34; IMG&#34); &#13;     }&#13;     #place .row-3,#place .row-4 {&#13;       边距:10px的;&#13;     }&#13;     #seatDescription {&#13;       填充:0像素;&#13;     }&#13;     #seatDescription li {&#13;       verticle对齐:中间; &#13;       list-style:none without none;&#13;       填充左:35px;&#13;       高度:35px;&#13;       浮动:左;&#13;     }&#13; &lt; script src =&#34; https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"&gt;&lt; / script&gt;&#13; &lt; select name =&#34; selected-seats&#34; &GT;&LT; /选择&GT;&LT峰; br&GT;&LT峰; br&GT;&#13; &lt; div id =&#34; place&#34;&gt;&lt; / div&gt;&#13; &#13; &#13; 在线 $ .each($(&#39; #place li。&#39; + settings.selectedSeatCss +&#39; a,#place li。&#39; + settings.selectingSeatCss +&#39; a&#39; ),function(index,value){     var option = document.createElement(&#34; option&#34;);     option.value = str.push($(this).attr(&#39; title&#39;));;     option.text = str.push($(this).attr(&#39; title&#39;));;     option.selected =&#39; selected&#39 ;;     select.appendChild(可选); }); 我有几个问题: 1-我找不到获得所选座位头衔的方法 2-如果未选中,我找不到一种方法来取消选择元素的子元素 有关清楚理解的应用程序的工作演示,请访问此处 任何人都可以建议我解决这个问题。

2 个答案:

答案 0 :(得分:1)

尝试使用此脚本并检查它是否适用于您,

<script>
    $(function () {

                select = document.querySelector("select[name='selected-seats']");
                var settings = {
                    rows: 4,
                    cols: 12,
                    rowCssPrefix: 'row-',
                    colCssPrefix: 'col-',
                    seatWidth: 45,
                    seatHeight: 45,
                    seatCss: 'seat',
                    selectedSeatCss: 'selectedSeat',
                    selectingSeatCss: 'selectingSeat'
                };

                var init = function (reservedSeat) {
                    var str = [], seatNo, className;
                    for (i = 0; i < settings.rows; i++) {
                        for (j = 0; j < settings.cols; j++) {
                            seatNo = (i + j * settings.rows + 1);
                            className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString();
                            if ($.isArray(reservedSeat) && $.inArray(seatNo, reservedSeat) != -1) {
                                className += ' ' + settings.selectedSeatCss;
                            }
                            str.push('<li class="' + className + '"' +
                                      'style="top:' + (i * settings.seatHeight).toString() + 'px;left:' + (j * settings.seatWidth).toString() + 'px">' +
                                      '<a title="' + seatNo + '">' + seatNo + '</a>' +
                                      '</li>');
                        }
                    }
                    $('#place').html(str.join(''));
                };          
                init();


                $('.seat').click(function () {                  

                    if ( $( this ).hasClass( "selectingSeat" ) ) {
                        $(this).removeClass("selectingSeat");
                    }else{
                        $(this).addClass("selectingSeat");
                    }
                    options="";
                    $("#place .seat").each(function () {
                        if ( $( this ).hasClass( "selectingSeat" ) ) {
                            options+="<option>"+$( this ).find("a").attr("title")+"</option>";
                        }
                    });

                    $("[name='selected-seats']").html(options);
                });
            });
</script>

答案 1 :(得分:0)

你可以试试这个: -

而不是你单独指定的那个功能
$('.' + settings.seatCss).click(function () {

 if ($(this).hasClass(settings.selectedSeatCss)){
     alert('This seat is already reserved');
}
else{
  $(this).addClass(settings.selectedSeatCss)
  var str = [], item;
  select.innerHTML = "";
  $.each($('#place li.' + settings.selectedSeatCss + ' a, #place li.'+ settings.selectingSeatCss + ' a'), function (index, value) {
     var option = document.createElement("option");
     option.value = $(this).attr('title'); 
     option.text =  $(this).attr('title');
     option.selected = 'selected';
     select.appendChild(option);
 });

            $(this).toggleClass(settings.selectingSeatCss);
            }
        });

你错过了两件事。

  1. 如果所选座位没有selectedSeatCss,则表示您没有添加。
  2. 您不会在每次选择后清除选择下拉菜单,而是每次都附加。