在html选项标记中使用javascript变量

我发现与我的问题相关的帖子很少，但似乎没有一篇适合我的情况。我有一个JSP页面，在其中的某个特定点，我需要检索在selected下拉列表中选择的选项，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>

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

<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>

现在我需要将保存在arr中的值发送到服务器。为此，将使用选项标记。代码如下：

<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>

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

<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>

我的编译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 arr = [];
        var listItems = $("#brand-id li span");
        listItems.each(function(idx, span) {
        var brand = $(span).html();
        arr.push(brand.toString());
        });
</script>

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

<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文件中的完整代码。我正在玩“Selected”插件生成的代码，以完成自定义排序。

您可以使用for循环将数组值附加到选项中，然后使用jquery的appendTo方法将这些选项放入其中。工作示例：

var选择=； var-arr=[]； var listItems=$brand id li span； listItems.eachfunctionidx，span{ var brand=$span.html； arr.pushbrand.toString； }; //具有值的arr console.logarr； 选择=“”； 对于var j=0；j您可以为span显示您的html吗？@Swati html代码已添加。您的arr将有值C、A、B。您需要将其放入选项中，对吗？是的，没错。当前，当我按提交时，无论我选择的顺序如何，都会提交值A、B、C。所以，我想通过JS实现它。这对我来说不起作用。编译后的代码有点像这样——我使用的是jquery版本1.11.1，更改它会给其余的代码带来问题。您不能使用具有相同ID的div，您需要为此使用类，上面的代码也可以在1.11.1版本上使用。也可以用jquery更新你的fiddle，如果它能工作，请告诉我。很抱歉，响应延迟。我用class代替id尝试了同样的方法，但仍然不起作用。另外，我注意到，当我在控制台中运行JS代码来获取数组时，我得到了所需的输出，但当通过提交按钮上的代码执行相同操作时，返回了一个空数组。可能是因为当时我正试图使用这个插件的编译代码来获取数组，所以没有呈现“Selected”插件的代码。你能处理一下你目前面临的问题吗？这很容易理解？