javascript - 如何使用下拉值更改 href 链接

标签 javascript jquery html hyperlink

我从查询中获得了选项值,并将其添加到下拉列表中。这是代码:

$(document).ready(function() {
    $( "#uname" ).focusout(function() {
        $("#loader").show();
        var uname = $( "#uname" ).val(),
            v_request = $.ajax({
            url  : "data/get_agent.php",
            type : "POST",
            dataType: "json",
            data : {
                uname  : uname
            }
        });

        v_request.done(function(data, status, jqXHR) {
            $("#application").empty();
            var option = document.createElement("option"),
                select = document.getElementById("application");
                option.text = '-- Application --';
                option.value = '';
                select.appendChild(option);

            $.each(data.data, function(key, data) {
                var option = document.createElement("option"),
                    select = document.getElementById("application");
                option.text = data.appname;
                option.value = data.appvalue;
                select.appendChild(option);
                if(data.defvalue == 1)
                    select.value = data.appvalue;
            });
        });
    })
});

选项值包含 url 链接,我想在 href 标记中调用它。这是代码:

<tr>
    <td>
        <select id="application" name="application">
        <option value=""> -- Application --  </option>
        </select>
    </td>
</tr>
<tr>
    <td align="center" style="padding-top:10px;" id="logInBtn">
    <a id="link_combo" href="javascript:void(0);" onmouseout="MM_swapImgRestore()"><img src="resources/images/straclick-login.png" name="btn-login" border="0" width="280" id="btn-login" /></a>
    </td>
 </tr>

我不知道如何将下拉值插入 href。

最佳答案

只是添加到 Barmar 的回答中,这里有一个例子:http://jsbin.com/panacoqaje/1/ (我会发表评论,但我还没有 50 声望 :P)

$("#application").change(function () {
  console.log(this.value);
  $("#link_combo").attr('href', this.value);
  $("#link_combo").text($("#application option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
        <select id="application">
        <option value="http://google.com/">Google</option>
        <option value="http://benzhang.xyz/">A Blog</option>
        </select>
    </td>
</tr>
<tr>
    <td align="center" style="padding-top:10px;" id="logInBtn">
      A link to: 
    <a id="link_combo" href="#">Unicorn Land</a>
    </td>
 </tr>

关于javascript - 如何使用下拉值更改 href 链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30044868/

相关文章:

javascript - Cordova HTTP插件: postJSON not a function

javascript - 数组表示

对象数据的 JavaScript 垃圾回收

PHP/JQuery - 从另一个客户端向客户端发送数据

javascript - 单击选项卡时如何提交表单

javascript - Fancybox iframe 不出现

javascript - 如何在select box select item的基础上滚动div垂直滚动条?

javascript - 选择下拉列表时如何禁用文本字段

javascript - 在 jquery 中显示拖放的图像

java - 新的 .xhtml 页面不会呈现任何 jsf 标签,但以前创建的页面在同一个项目中仍然可以正常工作