jquery:无法更改选择选项尝试了我能找到的所有解决方案

p1iqtdky 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(302)

我有一个id为“projectentryform--category”的HTMLselect，该选项（而不是select元素本身）的html是通过ajax提取的。
有了这个选择，我可以 console.log($('#project-entry-form--category')) 并获取jquery知道的关于它的所有信息。它显示了选项。因此，我知道jquery可以“看到”它们，因此应该能够在它们上设置所选的道具。我也可以 console.log($proj_data.cat_id) 并获取该类别所需的值。看起来我有所有的棋子，但它什么都没做。
我试过了

$('#project-entry-form--category').val($proj_data.cat_id);

和

$('#project-entry-form--category option[value="'+$proj_data.cat_id+'"]').prop('selected', 'selected').change();

和

$('#project-entry-form--category option[value="'+$proj_data.cat_id+'"]').prop('selected', true);

这些都不管用。
如果我尝试 console.log($('#project-entry-form--category').val()); 我得到空值。因此jquery似乎没有看到select的初始值。我认为这只是因为select显示了第一个选项，但它不是“selected”
如果我这样做：

$('#project-entry-form--category').change( function () {
        console.log($(this).val());
    });

当我更改控制台时，会在控制台中获取值。因此，jquery同样可以在我试图设置值时“查看”选项值。它还表明我正确拼写了选择器，所以没有打字错误。
我被难住了！感谢您的帮助！
--编辑--
有人要求我做一个我正在尝试的片段。似乎我有一个问题，ajax选项及时到达那里，以便.val（）更改它。

setTimeout(() => {
var $select_html = 
  '<option value="1" data-fold="Commercial">Commercial</option>'+
  '<option value="3" data-fold="Ecclesiastical">Ecclesiastical</option>'+
  '<option value="2" data-fold="Institutional - Educational">Institutional / Educational</option>'+
  '<option value="4" data-fold="Municipal">Municipal</option>'+
  '<option value="5" data-fold="Residential">Residential</option>'+
  '<option value="6" data-fold="Secure Projects">Secure</option>';
  $('#project-entry-form--category').html($select_html);
}, 500);
// Category ID received via AJAX - console.log() reveals the value is 5 (Residential)
var $proj_data = {'cat_id':5};
var $base = 'project-entry';
$('#' + $base + '-form--category').val($proj_data.cat_id);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select class="form-select" id="project-entry-form--category" name="project-entry-form--category"></select>

jquery html-select

来源：https://stackoverflow.com/questions/68521026/jquery-cant-change-the-select-option-tried-all-the-solutions-i-can-find

1条答案

按热度按时间

3yhwsihp1#

所以，因为很明显，这些选项没有及时出现在dom中 $('#project-entry-form--category').val($proj_data.cat_id); 为了设置它，我添加了一个参数 $pre_select 对我 ajax_get_select_options() 函数可选择在返回后设置select的值。可以使用相同的功能，而无需预先选择默认选项集。

function ajax_get_select_options($pre_select) { // Added the $pre_select param
  setTimeout(() => { // Mimic AJAX timing

  var $select_html = // HTML received from back-end API
    '<option value="1" data-fold="Commercial">Commercial</option>'+
    '<option value="3" data-fold="Ecclesiastical">Ecclesiastical</option>'+
    '<option value="2" data-fold="Institutional - Educational">Institutional / Educational</option>'+
    '<option value="4" data-fold="Municipal">Municipal</option>'+
    '<option value="5" data-fold="Residential">Residential</option>'+
    '<option value="6" data-fold="Secure Projects">Secure</option>';

    // The following happens inside the success block of the ajax call...

    // Add the options into the select element
    $('#project-entry-form--category').html($select_html); 

    // Add the ability to set the value of the select
    if ($pre_select) {
      // Need to add a check here to make sure $pre_select value exists
      // in the options value set before trying to set it
      $('#project-entry-form--category').val($pre_select);
    }

  }, 500);
}

// Category ID received via separate AJAX API call along with other $project data
var $proj_data = {'cat_id':5};

// Call for the options and specify a value to pre-select
ajax_get_select_options($proj_data.cat_id);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select class="form-select" id="project-entry-form--category" name="project-entry-form--category"></select>

赞(0）回复(0）举报 2021-09-13

我来回答

jquery:无法更改选择选项尝试了我能找到的所有解决方案

1条答案

相关问题

热门标签

最新问答