頁面加載選擇選項jquery像用戶行爲（實時更改事件觸發）

Question

我想在頁面加載時自動選擇選擇框選項。這是我的代碼不工作。

jQuery(document).ready(function(){ 
    jQuery(".configure_supre_select_1 option:eq(1)") 
    .attr('selected',true) 
    .trigger('change'); 
}); 

Answer 1

爲了實時點擊jquery我添加了下面的代碼。它使用「事件」。

在網頁加載變化選擇選項我用下面的代碼：

jQuery(".configure_supre_select_1").val(jQuery(".configure_supre_select_1 option:eq(1)").val()).change(); 

，然後使之實時改變我用下面的代碼：

var dropdown = $("SelectAttributeId"); // Id of select box 
var element = dropdown; 
var event = 'change'; 
var evt = document.createEvent("HTMLEvents"); 
evt.initEvent(event, true, true); 
return !element.dispatchEvent(evt); 

Answer 2

你觸發所選擇的選項，而不是選擇 - 也可以使用道具

$(function(){ 
    $(".configure_supre_select_1 option:eq(1)").prop('selected',true); 
    $(".configure_supre_select_1").trigger('change'); 
}); 

或者設置的值

$(function(){ 
    $(".configure_supre_select_1").val("firstOptionValue").change();   
}); 

$(function() { 
 
    $(".configure_supre_select_1").on("change", function() { 
 
    $(".optdiv").hide(); 
 
    var val = this.value; 
 
    if (val) { 
 
     $("#" + val.replace("OptionValue", "")).show(); 
 
    } 
 
    }); 
 
    $(".configure_supre_select_1").val("firstOptionValue").change(); 
 
    
 
    $(".configure_supre_select_2 option:eq(1)").prop('selected',true); 
 
    $(".configure_supre_select_2").trigger('change'); 
 
    
 
});

.optdiv { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select class="configure_supre_select_1"> 
 
    <option value="">Please select</option> 
 
    <option value="firstOptionValue">First</option> 
 
    <option value="secondOptionValue">Second</option> 
 
</select> 
 
<div class="optdiv" id="first">First is selected</div> 
 
<div class="optdiv" id="second">Second is selected</div> 
 
<hr /> 
 

 
Here I use your version <br/> 
 

 
<select class="configure_supre_select_2"> 
 
    <option value="">Please select</option> 
 
    <option value="firstOptionValue">First</option> 
 
    <option value="secondOptionValue">Second</option> 
 
</select>