Почему я не могу установить значение раскрывающегося списка после вызова AJAX?
Я загружаю массив из хранилища сеансов, который должен работать как «сохраненный» файл. Я использую данные в массиве для предварительного заполнения всех входных элементов, чтобы пользователь мог продолжить с того места, на котором он остановился. Все поля ввода заполняются корректно, кроме выпадающих элементов. Я делаю вызов базы данных, используя AJAX, чтобы получить параметры для раскрывающихся списков. Я использую jQuery .val(), чтобы установить значение раскрывающегося списка. Однако результат нулевой. Я знаю, что все загружается правильно, потому что я проверил переменные с помощью console.info(). По какой-то причине я не могу установить значение раскрывающегося списка. Я думаю, что это как-то связано с AJAX и вызовами базы данных. Я пытался поставить .val() в успехах и свойствах AJAX, но это все равно не работает. Выпадающее меню правильно заполняется вызовом базы данных, но я не могу установить значение, которое мне нужно. Вот мой текущий код:
HTML:
<select class = "form-control form-control-sm" id = "channelNum" placeholder = "Select Frequency" name = "channelNum">
<option value = "Select Frequency">Select Frequency</option>
</select>
JS:
var allData = JSON.parse(sessionStorage.getItem("data"));
var freq = allData[0];
var broadcastMarket = $("input[type='radio'][name='broadcastMarket']:checked").val();
var channelNum = $('#channelNum').val();
$.ajax({
url:"channelNum.php",
method:"POST",
data:{broadcastMarket : broadcastMarket, channelNum : channelNum},
success:function(data){
$('#channelNum').html(data);
$('#channelNum').val(freq);
}
});
PHP:
if ($result->num_rows > 0) {
// output data from each row into dropdown menu Channel
echo "<option value=\"Select Frequency\">Select Frequency</option>";
while ($row = $result->fetch_assoc()) {
echo "<option value=\"$row[$freqChannels]\"";
if ($channelNum == $row[$freqChannels]) {
echo "selected='selected'";
}
echo ">$row[$freqChannels]</option>";
}
}
Это также не работает, если я использую .val() перед вызовом AJAX. Таким образом, я хочу установить значение «channelNum» на «freq», но оно устанавливает только значение null. Пожалуйста, дайте мне знать, если есть какие-либо советы или решения.
@epascarello, да, параметры заполнены правильно. В настоящее время это полный список параметров, но я просто не могу установить значение по какой-то причине.
Вам необходимо предоставить пример данных для репликации того, что хранится в sessionStorage. PHP пытается установить значение selected, и вы также пытаетесь сделать это с помощью jQuery в обратном вызове AJAX - могут ли они как-то конфликтовать? Не зная задействованных данных или содержимого меню select, трудно ответить.
$.ajax получает только один результат от php, но в вашем php вы выпускаете вывод в цикле, вместо этого буферизуете весь вывод в строке и, наконец, эхо...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я бы сначала посоветовал изменить PHP, чтобы он больше походил на API, который возвращает JSON.
$results = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
array_push($results, array(
"label" => $row[$freqChannels],
"value" => $row[$freqChannels]
"selected" => $channelNum == $row[$freqChannels]
));
}
}
// Close SQL Connection
// Send JSON to Browser
header('Content-type: application/json');
echo json_encode($results);
Таким образом, вы можете вызвать PHP через AJAX и получить быстрый результат. Затем вы можете преобразовать это в HTML.
var allData = JSON.parse(sessionStorage.getItem("data"));
var freq = allData[0];
var broadcastMarket = $("input[type='radio'][name='broadcastMarket']:checked").val();
var channelNum = $('#channelNum').val();
$.ajax({
url:"channelNum.php",
method:"POST",
data:{
broadcastMarket: broadcastMarket,
channelNum: channelNum
},
success:function(data){
$('#channelNum').empty();
$.each(data, function(i, v){
$('#channelNum').append($("<option>", {
value: v.value
}).prop("selected", v.selected).html(v.label));
});
}
});
Так, например, когда вы вызываете PHP, вы получите результаты JSON:
[
{
"label": "My first Pick",
"value": "first".
"selected": false
},
{
"label": "Second Choice",
"value": "second",
"Selected": true
}
]
Затем это становится HTML.
<option values = "first" selected = "false">My first Pick</option>
<option values = "second" selected = "true">Second choice</option>
Без фактического образца вашего ответа PHP и знания того, что хранится в вашем локальном хранилище, мы можем только догадываться. Следующий фрагмент демонстрирует, что ваш исходный фрагмент должен действительно работать, при условии, что data, который вы получаете от своей функции PHP, выглядит примерно так, как показано ниже, и что первый элемент в вашей проанализированной строке allData JSON на самом деле является одним из возможных значений в вашем элементе select:
// Set up some test data:
const data=`<option>please select ...</option><option selected>one</option><option>two</option><option>three</option><option>four</option>`;
var allData = JSON.parse(`["three",1,2,3]`);
// assuming, that allData really _is_ an array ...
var freq = allData[0];
// Knowing that your options were well filled
// I assume that the AJAX call went well,
// so I can leave it out here ...
// ... somewhere in the success callback:
$('#channelNum').html(data);
$('#channelNum').val(freq);<script src = "https://code.jquery.com/jquery-3.6.3.min.js"></script>
<select class = "form-control form-control-sm" id = "channelNum" placeholder = "Select Frequency" name = "channelNum">
<option value = "Select Frequency">Select Frequency</option>
</select>
Вы убедились, что значения в параметрах выглядят правильно?