Question

我正在编写用于在页面加载时选择选择框值的jQuery代码。

我正在做的是：

从数据库中提取值并存储在隐藏的输入字段中
在jquery中获取隐藏字段值
具有if条件，该条件将决定选择哪个值

我正在使用此jquery代码选择值：

jQuery('#days option[value=Mu]').attr('selected', 'selected');

它将selected='selected'属性添加到正确值，但是选择框显示默认值。

我不知道，可能是什么问题？请帮忙！

PS：如果我通过控制台运行相同的代码，则可以正常工作。也许是有引起冲突的东西，但是有很多代码非常难以调试，一无所知。

编辑：

还有其他表单字段，这些字段根据所选值显示。代码是这样的：

jQuery('#days').change(displayFields());

function displayFields(){

var value = jQuery('#days option:selected').val();

 switch(value){
   case 'Mu':
      jQuery('#mondayFields').show('slow');
      break;
   case 'Tu':
      jQuery('#tuesdayFields').show('slow');
      break;
   default:
      break;
 }

}

如果我删除此代码，则它将显示正确的选定值。这意味着此代码存在一些冲突。顺便说一句，它不会显示正确的下拉值，但会显示其字段。

Answer 1

根据输入的信息，这可能是选择元素加载的问题

也许

jQuery('#days option[value=Mu]').attr('selected', 'selected');

在加载选择元素之前执行。

如果是这样，您可以尝试在文档中准备好上面的代码，诸如此类

jQuery（document）.ready（function（）{

available_days=listings.groupby(['availability_365']).count()
available_days=listings.groupby(['availability_365'])['reviews_count'].count()
available_days=listings.groupby('availability_365').agg('sum')
available_days=listings.groupby(['availability_365']).agg({'reviews_count':np.sum})

}）;

尝试将所有js代码移到HTML下方

基于所进行的修改

在EDIT部分中添加的代码不应影响选择值，因此其他地方是错误的。

您可以添加jsfiddle来帮助

Answer 2

使用回调函数而不是调用函数：请参见下面的更新示例。

$(document).ready(function() {
    var hiddenFieldValue = $('#hiddenFieldId').val();
    //here no need to add the selected attribute, just set the value.
    $('#days').val(hiddenFieldValue);       

    $('#days').change(function() {
        //here just get the select box id to get value. This will get the selected option value automatically.
        var value = $('#days').val();   

        switch(value){
          case 'Mu':
            $('#mondayFields').show('slow');
            break;
          case 'Tu':
            $('#tuesdayFields').show('slow');
            break;
          default:
            break;
        }
    });     

});

JavaScript是异步的，因此您以前的代码无法保证在调用change方法期间将知道该函数。

顺便说一句：您可以使用$代替jQuery。

Answer 3

当您通过jQuery更改值时，您绕过了事件触发器，您需要在设置displayFields属性后在代码中触发它。

也不要在更改事件处理程序注册displayFields()而非//doc ready $(function(){ //to pass a function as a callback paramenter leave out the parentesis "()" //jQuery('#days').change(displayFields()); $('#days').change(displayFields); var option = jQuery('#days option[value=Mu]'); option.attr('selected', 'selected'); option.trigger('change'); }); function displayFields(){ var value = $('#days').val(); switch(value){ case 'Mu': jQuery('#mondayFields').show('slow'); break; case 'Tu': jQuery('#tuesdayFields').show('slow'); break; default: break; } }上加上括号

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>Days</p>
  <select id="days">
  <option value="">Empty</option>
  <option value="Mu">Mu</option>
  <option value="Tu">Tu</option>
  </select>
</div>

<div id="mondayFields" style="display:none;">
MONDAY
</div>
<div id="tuesdayFields" style="display:none;">
TUESDAY
</div>

var result = from eb in eventBands
                      join et in eventTickets on eb.venueID equals et.venueID into bt
                      from x in bt.DefaultIfEmpty()

                      join es in eventSponsers on x.eventID equals es.eventID into st
                      from y in st.DefaultIfEmpty()
                      select new
                      {
                          // Add your assignments
                          //eb = eb.venueID,
                          //et = x.venueID,
                          //es = y.eventID

                      };

jQuery：在页面加载时未选择正确的下拉值

3 个答案: