[英]Change href value with JS from select box
I have this select box that gets its data from my DB. 我有这个选择框从我的数据库中获取数据。 What I want to do is add Edit and Delete buttons next to my select box that will do the respective actions on the current selected option.
我想要做的是在我的选择框旁边添加编辑和删除按钮,这些按钮将对当前所选选项执行相应的操作。
So I added two buttons that direct to php scripts that do all this work. 所以我添加了两个按钮,指向完成所有这些工作的php脚本。 My problem is with JavaScript where I need to update the elements of the buttons.
我的问题是JavaScript,我需要更新按钮的元素。
However my JS function doesn't work. 但是我的JS功能不起作用。 It appears that it isn't even fired.
它似乎甚至没有被解雇。
http://jsfiddle.net/y5g42/33/ http://jsfiddle.net/y5g42/33/
HTML: HTML:
<select name='selectHotel' onChange='updateButtons(this.options[this.selectedIndex].text)'>
<option value="volvo.php">Volvo</option>
<option value="saab.php">Saab</option>
<option value="mercedes.php">Mercedes</option>
<option value="audi.php">Audi</option>
</select>
<a href='' id='editButton'><button>Edit</button></a>
<a href='' id='deleteButton'><button>Delete</button></a>
JavaScript: JavaScript的:
function updateButtons(var) {
element = document.getElementById('editButton');
element.href = var;
}
您不能将var
用作变量名 - var
是javascripts保留字。
jsFiddle's onLoad
option wraps your code in a callback function. jsFiddle的
onLoad
选项将您的代码包装在回调函数中。
Therefore, your function definition isn't visible outside the code. 因此,您的函数定义在代码外部不可见。
You need to select No Wrap
instead. 您需要选择
No Wrap
。
You have several problems with your logic and the fiddle itself. 你的逻辑和小提琴本身有几个问题。
Best way without using JavaScript library is to attach the onchange
handler in the onload
of the window and handle everything there: 不使用JavaScript库的最佳方法是在窗口的
onload
中附加onchange
处理程序并处理其中的所有内容:
window.onload = function() {
var oDDL = document.getElementById("selectHotel");
oDDL.onchange = function updateButtons() {
var oLink = document.getElementById('editButton');
oLink.href = oDDL.value;
};
oDDL.onchange();
};
To have it work, add id="selectHotel"
to the <select>
element and remove the inline onchange
from it. 要使其工作,请将
id="selectHotel"
添加到<select>
元素,并<select>
删除内联onchange
。
Updated fiddle . 更新了小提琴 。
In your initial fiddle you didn't choose proper framework properties. 在您最初的小提琴中,您没有选择适当的框架属性。
Note that I am calling the onchange
manually one time to reflect the selected value, otherwise clicking the button before selecting other value won't work. 请注意,我手动调用
onchange
一次以反映所选值,否则在选择其他值之前单击按钮将不起作用。
You just passed value rather than text on onchange
function 你只是在
onchange
函数上传递值而不是文本
onChange='updateButtons(this.options[this.selectedIndex].value)'
You can try something like this : 你可以尝试这样的事情:
window.updateButtons = function(value) {
element = document.getElementById('editButton');
var url = window.location.href;
element.href = url + value;
console.log(element.href);
}
See Demo : http://jsfiddle.net/y5g42/46/ 见演示 : http : //jsfiddle.net/y5g42/46/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.