如何使用下拉列表更改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鏈接

回答

相關問題