如何用下拉值更改href鏈接

[英]How to change href link with dropdown value


I got option values from a query, and i added into dropdown list. here's the code:

我從查詢中獲得選項值,並添加到下拉列表中。這是代碼:

$(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;
            });
        });
    })
});

the option value contain url link, i want call it in a a href tag. here's code:

選項值包含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>

i don't know how to insert drop down value into href.

我不知道如何將下拉值插入到href中。

2 个解决方案

#1


3  

Just adding to Barmar's answer, here's an example: http://jsbin.com/panacoqaje/1/ (I would have commented but I don't yet have 50 reputation :P)

再加上Barmar的回答,這里有一個例子:http://jsbin.com/panacoqaje/1/

$("#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>

#2


3  

Use .val() to get the value of the dropdown when you click on the link.

當單擊鏈接時,使用.val()來獲取下拉列表的值。

$("#link_combo").click(function() {
    var url = $("#application").val();
    if (url != "") {
        window.location = url;
    }
});

Or when the user selects something from the dropdown, you can change the href:

或者當用戶從下拉菜單中選擇某樣東西時,您可以更改href:

$("#application").change() {
    var url = $(this).val();
    $("#link_combo").attr("href", url == "" ? "javascript:void(0)" : url);
});

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2015/05/05/7302a859bff9ff4da20888306c0cde8f.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com