在 html 選項標簽中使用 javascript 變量

Question

我發現與我的問題相關的帖子很少，但似乎沒有一個適合我的情況。 我有一個 JSP 頁面，在該頁面中，我需要檢索在選定的選擇下拉列表中選擇的選項，其 javascript 代碼如下：

<script type="text/javascript">
        var arr = [];
        var listItems = $("#brand-id li span");
        listItems.each(function(idx, span) {
        var brand = $(span).html();
        arr.push(brand.toString());
        });
</script>

現在我需要將保存在arr 中的值發送到服務器。 為此，使用了選項標簽。 代碼如下：

<option selected="selected" value="<%=arr[i]%>"><%=arr[i]%></option>

我編譯的 HTML 代碼：

<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Brand:</label>
    <div id="brand-id" class="col-sm-9">
        <select id="brand-select-id" data-placeholder="Select Brand" name="brand" multiple="" class="chosen-select" style="display: none;">
                        <option selected="selected" value="A">A</option>
                        <option selected="selected" value="B">B</option>
                        <option selected="selected" value="C">C</option>
                        <option value="D">D</option>
                        <option value="E">E</option>
        </select>
        <div class="chosen-container chosen-container-multi" style="width: 83%;" title="" id="brand_select_id_chosen">
            <ul class="chosen-choices">
                <li class="search-choice"><span>C</span><a class="search-choice-close" data-option-array-index="2"></a></li>
                <li class="search-choice"><span>A</span><a class="search-choice-close" data-option-array-index="0"></a></li>
                <li class="search-choice"><span>B</span><a class="search-choice-close" data-option-array-index="1"></a></li>
                <li class="search-field"><input type="text" value="Select Brand" class="" autocomplete="off" style="width: 25px;"></li>
            </ul>
            <div class="chosen-drop">
                <ul class="chosen-results">
                    <li class="result-selected" style="" data-option-array-index="0">A</li>
                    <li class="result-selected" style="" data-option-array-index="1">B</li>
                    <li class="result-selected" style="" data-option-array-index="2">C</li>
                    <li class="active-result" style="" data-option-array-index="3">D</li>
                    <li class="active-result" style="" data-option-array-index="4">E</li>
                </ul>
            </div>
        </div>
    </div>
</div>

我的困惑是如何在選項標簽中使用 arr[i] ，甚至可能。 如果沒有，我如何以其他方式完成相同的任務。 謝謝。

JSP文件：

<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Brand:</label>
    <div class="col-sm-9">
        <select data-placeholder="Select Brand" name="brand" multiple class="chosen-select col-xs-10 col-sm-10">
            <%
            // user.get("brand") gets the already selected brands by the user
            // masterRecords.get("brandslist") gets the complete list of brands from LDAP whether selected or not selected
            String brands="";
            if(user.get("brand")!=null && !user.get("brand").isEmpty())
                brands =user.get("brand").toLowerCase(); 
            if(masterRecords.get("brandslist")!=null && masterRecords.get("brandslist").length > 0){
            for(String brand:masterRecords.get("brandslist")){
                if(brands.contains(brand.toLowerCase().trim())){%>
            <option selected="selected" value="<%=brand.trim().toLowerCase()%>"><%=brand.trim()%></option>
                <%}else{%>
            <option value="<%=brand.trim().toLowerCase()%>"><%=brand.trim()%></option>
                <%} 
            } 
            }%>
        </select>
    </div>
</div>

在同一個 JSP 文件中，我添加了如下 JS 代碼：

<script type="text/javascript">
    var select = "";
    var arr = [];
    var listItems = $("#brand-id li span");
    listItems.each(function(idx, span) {
      var brand = $(span).html();

      arr.push(brand.toString());

    });
    //arr having values
    console.log(arr);


    select = ' <select id="brand-select-id" data-placeholder="Select Brand" name="brand" multiple="" class="chosen-select" style="">';
    for (var j = 0; j < arr.length; j++) {
      //appending options in selectbox
      select += '<option  selected="selected"value="' + arr[j] + '">' + arr[j] + '</option>';

    }
    select += '</select>';
    //append select to div 
    $(select).appendTo('.select');
</script>

使用您的代碼更新的 JSP 文件：

<div class="form-group">
    <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Brand:</label>
    <div id="brand-id"  class="col-sm-9">
            <%
            // user.get("brand") gets the already selected brands by the user
            // masterRecords.get("brandslist") gets the complete list of brands from LDAP whether selected or not selected
            String brands="";
            if(user.get("brand")!=null && !user.get("brand").isEmpty())
                brands =user.get("brand").toLowerCase(); 
            if(masterRecords.get("brandslist")!=null && masterRecords.get("brandslist").length > 0){
            for(String brand:masterRecords.get("brandslist")){
                if(brands.contains(brand.toLowerCase().trim())){%>
            <div class="select"></div>
                <%}
                //else part left for now
            } 
            }%>
        </select>
    </div>
</div>

編輯 1：添加了來自 JSP 文件的完整代碼。 我正在使用“選擇”插件生成的代碼來完成自定義排序。

Answer 1

您可以使用for-loop將數組的值附加到您的options ，然后使用 jquery 的appendTo方法將該選項放在<div id="select"></div> 。工作示例：

 var select = ""; var arr = []; var listItems = $("#brand-id li span"); listItems.each(function(idx, span) { var brand = $(span).html(); arr.push(brand.toString()); }); //arr having values console.log(arr); select = ' <select id="brand-select-id" data-placeholder="Select Brand" name="brand" multiple="" class="chosen-select" style="">'; for (var j = 0; j < arr.length; j++) { //appending options in selectbox select += '<option selected="selected"value="' + arr[j] + '">' + arr[j] + '</option>'; } select += '</select>'; //append select to div $(select).appendTo('#select');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Brand:</label> <div id="brand-id" class="col-sm-9"> <!--inside this div option will display--> <div id="select"></div> <div class="chosen-container chosen-container-multi" style="width: 83%;" title="" id="brand_select_id_chosen"> <ul class="chosen-choices"> <li class="search-choice"><span>C</span> <a class="search-choice-close" data-option-array-index="2"></a> </li> <li class="search-choice"><span>A</span> <a class="search-choice-close" data-option-array-index="0"></a> </li> <li class="search-choice"><span>B</span> <a class="search-choice-close" data-option-array-index="1"></a> </li> <li class="search-field"><input type="text" value="Select Brand" class="" autocomplete="off" style="width: 25px;"></li> </ul> </div> </div> </div>

---

更新 1 ：

正如我在評論中已經說過的那樣，您需要創建一些函數，以便在從chosen框中selected或deselected選項時調用它。在下面的代碼中，我使用change事件來檢查選擇框中是否發生任何更改調用函數來執行所需的更新。工作代碼：

 $('select.chosen-select').chosen(); //call function when page load update_values(); //whenever changes occur on select-box ie: if item is removed or added this will be called $(document).on('change', 'select.chosen-select', function(obj, result) { //calling function update_values(); }); function update_values() { var select = ""; var arr = []; var listItems = ""; //this will refresh values in chosen-select $('select.chosen-select').trigger("chosen:updated"); listItems = $("#brand-id li span"); listItems.each(function(idx, span) { var brand = $(span).html(); //adding values in array arr.push(brand.toString()); }); select = ' <select id="brand-select-id" data-placeholder="Select Brand" name="brand" multiple="" style="">'; for (var j = 0; j < arr.length; j++) { //appending options in selectbox select += '<option selected="selected"value="' + arr[j] + '">' + arr[j] + '</option>'; } select += '</select>'; //add select to div $('.select').html(select); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css"> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" for="form-field-1">Brand:</label> <div id="brand-id" class="col-sm-9"> <select id="brand-select-id" data-placeholder="Select Brand" name="brand" multiple="" class="chosen-select" style="width:300px"> <option selected="selected" value="A">A</option> <option selected="selected" value="B">B</option> <option selected="selected" value="C">C</option> <option value="D">D</option> <option value="E">E</option> </select> </div> <!--select box will come inside this--> <div class="select"> </div> </div>