如何更改下拉列表的值並觸發javascript中的onchange函數
[英]how to change a value of drop down and to trigger a onchange functions in javascript
問題描述
我想知道是否有可能動態更改下拉框的值並同時觸發分配給該下拉列表的ajax onchange函數。
到目前為止，我只能更改下拉框的值，但不會調用onchange函數。
這是下拉列表：
<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)">
<option value="">--Select Item--</option>
<option value="one"> Option one</option>
<option value="two"> Option Two</option>
<option value="three"> Option Three</option>
</select>
當我執行此操作時：
document.getElementById("ProductSelector").value = "one";
下拉列表的值正在更改，但未觸發getItems函數。
我在做錯什么，或者可能有另一種方法來更改doropdown的值，這也將允許我觸發我的ajax函數嗎？
我不想使用JQuery。 我只是在徘徊，為什么我使用動態更改后該功能不起作用，而在手動更改上它可以正常工作？
6 個解決方案
解決方案1
1 已采納 2015-05-28 09:12:17
因此，您正在使用JavaScript更改值，並且不會觸發change事件。 因此，讓我們觸發它。
每次通過JavaScript更改值時觸發事件change 。
沒有使用jQuery。
嘗試這個：
function changeVal() { var elem = document.getElementById("ProductSelector"), event = new Event('change'); elem.value = "one"; elem.dispatchEvent(event); } function getItems(val) { alert(val); } changeVal();
<select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)"> <option value="">--Select Item--</option> <option value="one">Option one</option> <option value="two">Option Two</option> <option value="three">Option Three</option> </select>
解決方案2
0 2015-05-28 08:53:48
我主要是這樣：
HTML：
<select class="class-name">
<option value="1">1</option>
<option value="2">2</option>
</select>
jQuery的：
$(".class-name").on("change", function() {
var value = $(this).val();
$.ajax({
type: "post",
url: "your-php-script.php",
data: { 'value' : value },
success: function (data) {
alert('This has changed');
}
);
});
解決方案3
0 2015-05-28 09:20:51
問題是使用JS更改值不會觸發更改事件。 最好的解決方案是編寫一個函數來更改值並手動觸發更改事件。
的HTML
<select name="ProductSelector" id="ProductSelector">
<option value="">--Select Item--</option>
<option value="one"> Option one</option>
<option value="two"> Option Two</option>
<option value="three"> Option Three</option>
</select>
JS （沒有jQuery）
//define the element so we can access it more easily
var element = document.getElementById('ProductSelector');
//define the event we want to trigger manually later
var event = new Event('change');
//add eventlistener which is triggered by selecItem()
element.addEventListener('change', function(event) {
getItems(event.target.value);
});
function getItems(val) {
alert(val);
}
//set the value and trigger the event manually
function selectItem(value){
//select the item without using the dropdown
element.value = value;
//trigger the event manually
element.dispatchEvent(event);
}
//using a function with the option you want to choose
selectItem("three");
使用有效的JSFiddle：請注意，您必須取消注釋代碼的最后一行。
解決方案4
0 2015-05-28 10:36:58
<html>
<body>
Select your favorite value:
<select id="mySelect">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4</option>
</select>
<script>
$(document).ready(function() {
$( "#mySelect" ).change(function() {
var value = $(this).val();
$.ajax({
type: "post",
url: "request-url.php",
data: { 'value' : value },
success: function (data) {
alert('the ajax request has been send');
}
);
});
});
</script>
</body>
</html>
解決方案5
-1 2015-05-28 08:51:10
您可以嘗試從選擇輸入中刪除onchange=""屬性，然后僅使用jQuery檢查更改：
$('body').on('change', "#ProductSelector", function(){
var id = $(this).val();
//now do your ajax call with the value selected
});
解決方案6
-1 2015-05-28 08:52:54
“我做錯了什么，或者可能還有另一種方法來更改doropdown的值，這也將允許我觸發我的ajax函數嗎？”
添加事件偵聽器的另一種方法是將其設置為“ 不引人注目的樣式 ”。
document.getElementById('ProductSelector').addEventListener('change', function(event) { getItems(event.target.value); }); function getItems(val) { // Todo: whatever needs to be done :-) alert(val); }
<select name="ProductSelector" id="ProductSelector"> <option value="">--Select Item--</option> <option value="one">Option one</option> <option value="two">Option Two</option> <option value="three">Option Three</option> </select>
如何連接 div 和 javascript 函數和事件並創建 function 將值從下拉列表傳遞到另一個元素？
[英]How to connect div and javascript functions and event and create function that proceed value from drop down list to another element?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.