[英]Use javascript variable in html option tag
I found few posts related to my question but none of them seems to be apt for my case.我发现与我的问题相关的帖子很少,但似乎没有一个适合我的情况。 I have a JSP page in which at a particular point I need to retrieve the options selected in a chosen select dropdown for which the javascript code is as below:
我有一个 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>
Now I need to send the values saved in arr to the server.现在我需要将保存在arr 中的值发送到服务器。 For this the option tag is used.
为此,使用了选项标签。 Code is as below:
代码如下:
<option selected="selected" value="<%=arr[i]%>"><%=arr[i]%></option>
My Compiled HTML code:我编译的 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>
My confusion is how do I use arr[i] in the option tag and is it even possible.我的困惑是如何在选项标签中使用 arr[i] ,甚至可能。 If not, how can I do the same task in some other way.
如果没有,我如何以其他方式完成相同的任务。 Thanks.
谢谢。
JSP file: 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>
In the same JSP file I have added the JS code as below:在同一个 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 file updated with your code:使用您的代码更新的 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>
EDIT 1: The complete code from JSP file has been added.编辑 1:添加了来自 JSP 文件的完整代码。 I was playing with the code generated by the 'chosen' plugin to get the custom sorting done.
我正在使用“选择”插件生成的代码来完成自定义排序。
You can append value of array to your options
using for-loop
and then use appendTo
method of jquery to put that options inside <div id="select"></div>
.Working example :您可以使用
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>
Update 1 :更新 1 :
As i have already said in comment that you need to make some function so that it be called whenever options are selected
or deselected
from the chosen
select-box.In below code i have used change
event to check if any change occur in select box then call function to do required update.Working code:正如我在评论中已经说过的那样,您需要创建一些函数,以便在从
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.