2013-05-14 33 views
5

Tôi có một chức năng js điều khiển appearnace của một yếu tố được chọn khi thay đổi. Tuy nhiên, một điều tôi cần là để mã chạy từ đầu để khi phần tử tải lớp tùy chọn đã chọn nên đã được áp dụng.Chạy javascript cho menu thả xuống khi tải trang?

css:

select {height: 50px; width: 80px; border: solid 1px #c8c8c8; color:rgba(0, 0, 0, 0);} 
select:focus, #select:focus { 
    color:black; 
} 

.lightgrey {background: lightgrey} 
.green {background:green} 
.orange {background:orange} 
.yellow {background:yellow} 
.red {background:red} 
.purple {background:purple} 

JavaScript:

function colourFunction(select) { 
     var colour = select.options[select.selectedIndex].className; 

     select.className = colour; 
     select.blur(); 
    } 

Chọn:

<select class="selectElement" runat="server" id="dropdown_" onchange="colourFunction(this)"> 
        <option selected="selected" class="lightgrey" value="N">N</option> 
        <option class="green" value="G">G</option> 
        <option class="orange" value="O">O</option> 
        <option class="yellow" value="A">A</option> 
        <option class="red" value="R">R</option> 
        <option class="purple" value="U">U</option> 
       </select> 

Tôi muốn lớp cho N để được áp dụng trên tải với màu: rgba (0, 0 , 0, 0);

+0

bạn có sử dụng jQuery không? –

Trả lời

4

nếu bạn đang sử dụng jquery:

$(function(){ 
//all onload actions you want 
}); 

nếu bạn muốn gắn bó với js tinh khiết

document.onreadystatechange=function(){ 
//all onload actions you want 
} 
+0

Có vẻ như Javascript, tôi không có ý định downvote điều này mặc dù nó vẫn là một câu trả lời cho jquery. Xấu hổ không có cách nào để hoàn tác một downvote? –

+0

^Bây giờ bạn có thể upvote. Bạn nên đưa vấn đề đó vào meta.stackoverflow.com, tôi đã có cùng suy nghĩ. – Bill

+0

@Daniel thực sự không có? bạn có thể upvote nó nhưng điều này sẽ cung cấp cho tôi +8 đại diện nhiều hơn tôi nên có: SI không xứng đáng một downvote mặc dù ;-) –

4

Nếu bạn đang muốn JS để chạy trên tải trang, sau đó bạn có thể sử dụng lệnh "window.onload".

window.onload = function() 
{ 
    colourFunction(select); 
}; 
+0

tôi đã thử bằng cách sử dụng này, nó không hoạt động.Tôi đang asp.net bằng cách này - hiện có bất cứ điều gì để làm với nó? – Singh

+0

Bạn đã sử dụng bên ngoài mã colourFunction hiện tại của bạn? Hãy thử cũng thêm mã colourFunction trực tiếp vào window.onload = function() {} –

+0

có, tôi đã thử cả hai cách - không có vẻ như làm việc như mã xuất hiện để phá vỡ – Singh

1

Issue là chức năng của bạn về biến đổi được mong đợi một đối tượng, do đó bạn cần phải nhận được một xử lý cho rằng trên tải

Bạn cần:

window.onload = function() 
{ 
    a = document.getElementById("dropdown_") 
    a.selectedIndex = 1//or 0 
    colourFunction(a); 
}; 

đầy đủ:

<style> 
select {height: 50px; width: 80px; border: solid 1px #c8c8c8; color:rgba(0, 0, 0, 0);} 
select:focus, #select:focus { 
    color:black; 
} 

.lightgrey {background: lightgrey} 
.green {background:green} 
.orange {background:orange} 
.yellow {background:yellow} 
.red {background:red} 
.purple {background:purple} 
</style> 
<body> 

<script> 
function colourFunction(select) { 
      var colour = select.options[select.selectedIndex].className; 

      select.className = colour; 
      select.blur(); 
     } 

window.onload = function() 
{ 
    a = document.getElementById("dropdown_") 
    a.selectedIndex = 1//or 0 
    colourFunction(a); 
}; 

</script> 

<select runat="server" id="dropdown_" onchange="colourFunction(this)"> 
<option class="lightgrey" value="N">N</option> 
<option class="green" value="G">G</option> 
<option class="orange" value="O">O</option> 
<option class="yellow" value="A">A</option> 
<option class="red" value="R">R</option> 
<option class="purple" value="U">U</option> 
</select> 
Các vấn đề liên quan