[英]Set chosen multiselect option value as selected using json
我花了差不多两天的时间来寻找我的问题的解决方案,但没有发现任何问题。 可能是我最近开始学习Ajax和jquery的东西,我错过了什么。
注意:我的所有选择框都是Chosen Multiple选择框,所有选项都是硬编码的。
我有多个文本和选择框,我想在其中显示/选择mysqli json输出数据中的一个选择框更改事件之一(基本上使用此用户可以复制/编辑保存在db中的所有文本和选择框的现有详细信息)。
我已经成功地使用以下js代码为文本框执行此操作,这是我在过去两天中学到的以完成我的任务
$(document).ready(function ()
{
$('#posted_jobs').on('change', function ()
{
var selectedValue = $(this).val();
$.ajax
({
url: 'Copyvalue.php',
type: 'POST',
data: 'filter_job_id=' + selectedValue,
success: function(response)
{
var obj = $.parseJSON(response);//parse JSON
console.log(response);
//alert(JSON.stringify(obj));
$("#Job_Type").val(["Normal"]); // have tried manually adding value to selectbox here but not working
$('#Locations').val(obj[0].Job_type); // have tried manually adding value to selectbox here but not working
$('#Job_Type').val(obj[0].Job_type);
$('#Keywords').val(obj[0].Keywords);
$('#designation').val(obj[0].Designation);
$('#Company_name').val(obj[0].Company_Name);
$('#Contact_Person').val(obj[0].Contact_person_name);
$('#Contact_person_no').val(obj[0].Contact_No);
$('#Job_name').val(obj[0].Job_name);
}
});
});
});
我已经尝试了堆栈溢出和其他网络建议的n个选项。 但是不能让这个选择框工作。 请帮助我让这个工作,如果可能的话请告诉我从哪里可以学到这个的好资料。
尝试了类似的选项
$("#Locations").val(["1, 2, 3, 4"]).prop("selected", false);
$("#Locations").val([1, 2]);
我的PHP脚本Json在Chrome控制台中输出
[{"Job_id":"6","Employer_id":"2","creation_on":"2015-01-03 18:48:58","Keywords":"operation executive, manager operation, operation manager, executive operation","Job_type":"Normal","Designation":"Assistant Manager - Operation","Open_Positions":"4","Job_Description":"<p><strong>Good<\/strong> <em>Position<\/em><\/p>","Min_age":"23","Max_age":"34","Min_exp":"5","Max_exp":"12","Min_salary":"104","Max_salary":"109","Hide_Salary":"","Locations":"3, 4, 8, 45, 46","Industry":"10002, 10004","FA":"1002, 1003","Education":"4, 6, 9","Company_Name":"Aviva Life Insurance Company India Limited","About_Company":"<p><strong>Good<\/strong><em> Company<\/em><\/p>","Contact_person_name":"Balvinder Rayat","Contact_No":"9818906677","Refresh_type":"15","Response_type":"VC","Job_name":"Operation AM","Job_status":"Active"}]
我的选择框
<select id="Locations" name='Locations[]' style='width:100%;' data-placeholder='Type or select
locations' multiple class='chosen-select-no-results'>
<option value="1">Bangalore</option>
<option value="2">Chennai</option>
<option value="3">Delhi</option>
<option value="4">Gurgaon</option>
<option value="5">Hyderabad</option>
<option value="6">Kolkata</option>
<option value="7">Mumbai / Navi Mumbai</option>
</select>
我搜索了一点,并得到了解决方案(我猜)专门设置选择框值(选择选择框)
基本上,代码中缺少触发器,导致所有问题。 在使用json检索的最后一个值中添加触发器后,它们都得到了解决。
$("#Job_Type").val(obj[0].Job_type).trigger('chosen:updated');
希望它也有助于其他!!
从这个链接找到答案链接
对于多个选择框,如果您有[1,2,3,4]这样的值,您可以使用以下方法获得结果:
var values = obj[0].Locations;
$.each(values.split(','), function(index, element)
{
$('#Locations').find('option[value="'+ element +'"]').attr('Selected', 'Selected');
$("#Locations").trigger('chosen:updated');
});
我在使用jQuery选择的插件填充<select>
时也遇到了类似的问题,并默认设置了一些选项。 我在代码中使用的方法就像,
<select>
元素 <option>
元素 我使用的代码片段如下。
var response = "[{\\"id\\":\\"1\\",\\"location\\":\\"Chennai\\"},{\\"id\\":\\"2\\",\\"location\\":\\"Bangalore\\"},{\\"id\\":\\"3\\",\\"location\\":\\"Hyderabad\\"}, {\\"id\\":\\"4\\",\\"location\\":\\"Goa\\"},{\\"id\\":\\"5\\",\\"location\\":\\"Delhi\\"},{\\"id\\":\\"6\\",\\"location\\":\\"Mumbai\\"},{\\"id\\": \\"7\\",\\"location\\":\\"Cochin\\"},{\\"id\\":\\"8\\",\\"location\\":\\"Trivandrum\\"}]"; /*populate <select> with the list of locations*/ var locationList = JSON.parse(response); $.each(locationList, function() { $("#location-select").append($("<option/>") .val(this.id).text(this.location)); }); $("#location-select").chosen({ no_results_text: "Oops, no location found!", display_selected_options: false }); /*Make some locations from the list to be selected by default*/ var selectedLoc = JSON.parse("[{\\"id\\":\\"2\\",\\"location\\":\\"Bangalore\\"},{\\"id\\":\\"6\\",\\"location\\":\\"Mumbai\\"},{\\"id\\": \\"7\\",\\"location\\":\\"Cochin\\"}]"); /* *Create an array of locations, it can be array of id also,then * the if condition should be * if ($.inArray($(this).val(), users) != -1){...} * This is because id is populated as * <select> * <option value="id from json"> location from json </option> * </select> */ var locations = []; $.each(selectedLoc, function() { locations.push(this.location); }); $("#location-select option").each(function() { if ($.inArray($(this).text(), locations) != -1) { $(this).attr('selected', 'selected'); $("#location-select").trigger('chosen:updated'); return; } });
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script> <h3> jQuery Chosen multiselect with selected values by default </h3> <select id="location-select" data-placeholder="Select locations..." style="width:95%;" multiple class="chosen-select"></select>
我写了一个简单的例子http://jsfiddle.net/f7z664u5/
而不是那部分
if($(this).val() == 1)
{
$(this).prop('selected', true);
}
if($(this).val() == 2)
{
$(this).prop('selected', true);
}
检查数组中的值..或者存储数据的类型。
这会奏效。
$.each(objlist, function (index, value) {
$(".chosen-select option[value=" + value.id+ "]").attr("selected", "selected");
$(".chosen-select").trigger("chosen:updated");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.