Question

我有这个选择框从我的数据库中获取数据。我想要做的是在我的选择框旁边添加编辑和删除按钮，这些按钮将对当前所选选项执行相应的操作。

所以我添加了两个按钮，指向完成所有这些工作的php脚本。我的问题是JavaScript，我需要更新按钮的元素。

但是我的JS功能不起作用。它似乎甚至没有被解雇。

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的：

function updateButtons(var) {
    element = document.getElementById('editButton');
    element.href = var;
}

Answer 1

您不能将var用作变量名称 - var是javascripts保留字。

Answer 2

jsFiddle的onLoad选项将您的代码包装在回调函数中因此，您的函数定义在代码外部不可见。

您需要选择No Wrap。

Answer 3

你的逻辑和小提琴本身有几个问题。

不使用JavaScript库的最佳方法是将onchange处理程序附加到窗口的onload中并处理其中的所有内容：

window.onload = function() {
    var oDDL = document.getElementById("selectHotel");

    oDDL.onchange = function updateButtons() {
        var oLink = document.getElementById('editButton');    
        oLink.href = oDDL.value;
    };

    oDDL.onchange();
};

要使其有效，请将id="selectHotel"添加到<select>元素，然后从中删除内联onchange。

Updated fiddle

在你最初的小提琴中，你没有选择合适的框架属性。

请注意，我手动调用onchange一次以反映所选值，否则在选择其他值之前单击按钮将无效。

Answer 4

您刚刚在onchange函数

上传递了值而不是文本

  onChange='updateButtons(this.options[this.selectedIndex].value)'

您可以尝试这样的事情：

 window.updateButtons = function(value) {

     element = document.getElementById('editButton');
     var url = window.location.href;
     element.href = url + value;
     console.log(element.href);  
}

参见演示：http://jsfiddle.net/y5g42/46/

使用JS从选择框更改href值

4 个答案: