如何更改drop down的值并在javascript中触发onchange函数
我想知道是否可以动态更改下拉框的值，同时触发分配给该下拉框的ajaxonchange函数 到目前为止，我只能更改下拉框的值，但是没有调用onchange函数 以下是下拉列表：如何更改drop down的值并在javascript中触发onchange函数,javascript,php,html,Javascript,Php,Html,我想知道是否可以动态更改下拉框的值，同时触发分配给该下拉框的ajaxonchange函数 到目前为止，我只能更改下拉框的值，但是没有调用onchange函数 以下是下拉列表： <select name="ProductSelector" id="ProductSelector" onchange="getItems(this.value)"> <option value="">--Select Item--</option> <option va
<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>
$('body').on('change', "#ProductSelector", function(){
var id = $(this).val();
//now do your ajax call with the value selected
});
我主要是这样做的： HTML:
因此，您正在使用JavaScript更改值，而更改事件不会触发。那么，让我们触发它吧 每次通过JavaScript更改值时触发事件更改 没有使用jQuery 试试这个： 函数转换值{ var elem=document.getElementByIdProductSelector， 事件=新事件“变更”； 元素值=一； elem.dispatchEventevent事件； } 函数getItemsval{ alertval； } changeVal； -选择项- 选择一 选择二 选择三
问题是使用JS更改值不会触发更改事件。最好的解决方案是编写一个函数来更改值并手动触发更改事件 HTML
使用正在工作的JSFIDLE：注意，您必须取消注释最后一行代码。您的实际问题是什么代码工作正常问题是当我更改DINAMICALLY值时，getItems函数没有被触发，如果我在那里手动选择某个值，它工作正常。但是，如果chagne来自代码，则不调用该函数以发布一些相关代码，那么“@mistersweet您使用的是哪种浏览器？javasript中是否有任何方法？我的大多数函数都是用jacascript编写的，如果我添加jquery，会让工作人员陷入混乱。没有jquery还有什么问题吗？jquery不是一个选项，它仍然无法解决问题。没有jquery如何。我并不特别喜欢它。上面的例子没有jQuery@MisterSweety如果使用js更改值，您的示例仍然不会触发警报。在您的示例中，我在哪里传递所需的参数？在您发布的代码中，您希望传递的值为。在我的示例中，这是通过event.target.value传递的。so.valie=选项实际上不被视为drop box值中的更改？至少它不会触发更改事件。
<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>
<select class="class-name">
<option value="1">1</option>
<option value="2">2</option>
</select>
$(".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');
}
);
});
<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>
//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");
<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>