2015-01-10 3 views
2

Я потратил почти два дня на поиск решения моей проблемы, но не узнал. Может быть, я недавно начал изучать Ajax & jquery stuff, я что-то пропустил.Установите выбранное значение параметра мультиселектора, выбранное с помощью json

Примечание: Все мои выбранные боксы выбраны. Множественный флажок выбора & все опции жестко закодированы.

У меня есть несколько текстовых & полей выбора, в котором я хочу, чтобы отобразить/выбора данных из выходного основы MySQLi JSon один из одного события изменения выбора коробки (в основном с помощью этого пользователь может копировать/редактировать существующие детали, сохраненные в БД для всего текста & выберите поля).

Я был успешно в состоянии выполнить это для текстовых полей, используя следующий 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); 
      } 
     });   
    }); 
    }); 

я пытался п число опций из стека переполнения & другой веб-предложения. но не в состоянии заставить это работать для ящиков выбора. Пожалуйста, помогите мне получить эту работу &, если возможно, скажите мне хороший источник, откуда я могу это узнать.

попробовали варианты, как

$("#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>      

ответ

0

Я написал простой пример http://jsfiddle.net/f7z664u5/

вместо той части

if($(this).val() == 1) 
{ 
    $(this).prop('selected', true); 
} 
if($(this).val() == 2) 
{ 
    $(this).prop('selected', true); 
} 

проверить, является ли значение в массиве .. или в каком типе хранятся данные.

+0

проверили тип данных & значения в массиве. оба правильные. Тип данных - Varchar & values ​​можно увидеть внутри выхода Json, а также для местоположения. Кроме того, я попытался вручную выбрать значения (которые я упомянул в деталях в окне выбора), но они не выбираются даже после использования вашего решения проблемы. –

+0

Я видел много jsfiddles, похожих на то, как вы делились, когда выбирались опции, но он не работает с моим. не знаю почему. Я реализовал свой код здесь «успех: функция (ответ) \t \t \t { \t \t \t \t вар OBJ = $ .parseJSON (ответ); // разбор JSON \t \t \t \t \t \t \t console.log (ответ) ; \t \t \t \t //alert(JSON.stringify(obj)); \t \t \t \t \t \t \t \t \t \t $ ("# Местоположение"). Найти ("вариант"). Каждая (функция() \t \t \t \t { \t \t \t \t \t если ($ (это) .val() == 1) \t \t \t \t \t { \t \t \t \t \t \t $ (это) .prop ('выбрано', правда); \t \t \t \t \t} \t \t \t \t \t, если ($ (это) .val() == 2) \t \t \t \t \t { \t \t \t \t \t \t $ (это) .prop ('выбран ', правда); \t \t \t \t \t} \t \t \t \t});», но он не работал и ничего не показал, как выбрано –

4

я искал немного больше & получил решение (я думаю) для установки выберите значение окна специально для (Chosen поля выбора)

в основном, триггер отсутствует в коде, который вызывает все проблемы. После добавления триггера в последние значения, полученные с помощью json, все это было решено.

$("#Job_Type").val(obj[0].Job_type).trigger('chosen:updated'); 

Надеюсь, это поможет другим!

нашел ответ от этой ссылки Link

Далее для множественного выбора поля, если у вас есть такие значения, как [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'); 
}); 
0

Это будет работать ,

$.each(objlist, function (index, value) {         
    $(".chosen-select option[value=" + value.id+ "]").attr("selected", "selected"); 
    $(".chosen-select").trigger("chosen:updated");        
}); 
+0

Высокий, если это рабочий раствор, но, возможно, немного описания, чтобы идти вместе с ним?:) – ctrlplusb

+0

U может связывать выбранное значение с attrabute Ex: Сценарий: вар listSelected = $ ('# donvicbb') атр ('выбрано значение');. $ ('# donvicbb'). Val (listSelected.split (',')); // set value - массив $ ('# donvicbb'). trigger ("selected: updated"); // Требуется. –

1

У меня тоже была подобная проблема при заполнении <select> с помощью JQuery выбранный плагин и установить некоторые параметры, выбранные по умолчанию. Подход, который я использовал в моем коде было похоже,

  • Получить ответ JSON с помощью Ajax вызова
  • Заполняем <select> элемент, используя JSON
  • перебирать <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>