如何使用下拉列表更改href链接

我从查询中获得选项值，并将其添加到下拉列表中。下面的代码：如何使用下拉列表更改href链接

$(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。

来源

2015-05-05 DimasW

您必须使用'$（“a”）。attr（“href”，“http://www.google.com/”）'。 – ketan

检查此问题http://stackoverflow.com/questions/5150363/onchange-open-url-via-select-jquery – kiran

使用此代码： $（“＃link_combo”）。attr（“href”，“http：/ /www.google.com/“）; – Lakhan

只是增加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>

来源

2015-05-05 05:40:53 Ben

谢谢你！它的工作原理 – DimasW

很高兴帮助！ – Ben

请确保给予Barmar一个赞许，他的回答是完全有效的！ – Ben

使用.val()可以在单击链接时获取下拉列表的值。

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

，或者当用户从下拉菜单中选择的东西，你可以改变href：

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

来源

2015-05-05 05:32:23 Barmar

谢谢@Barmar！ – DimasW

如何使用下拉列表更改href链接

回答

相关问题