如何使用jquery重定向页面

时间:2014-02-11 01:32:19

标签: jquery

我的功能是当我选择下拉列表值时,基于该部分将会在这里。

所有id内容都在同一页面中。所以我想根据选定的值

转到该部分

下拉列表内容

    <select class="dropdown" id="select">
    <option id="Choose a Service"">Choose a service</option>
        <option id="physio_content">Physiotheraphy</option>
        <option id="nurse_content">Nursing</option>
        <option id="doctor_content">Doctor</option>
        <option>Training attendant</option>
   </select>
<a href="" class="butt" id="home_btn">Schedule a HOME visit</a>

页面内容

<div id="physio_content">
      .........
</div>

jquery的

$("#home_btn").on('click',function(e){

    var lct = $('#select').val();
    document.location.href='#'lct;
 });

4 个答案:

答案 0 :(得分:0)

试试这个:

Your HTML:
<input type='hidden' id='fieldHidden' />

Your Jquery:
$("#select").on("change", function(){
    $('#fieldHidden').val(this.value);
});
$('#home_btn').click(function(e) {
    var url = $('#fieldHidden').val();
    //alert(url);
    window.location.replace(url);
    //e.preventDefault; 
});

答案 1 :(得分:0)

你需要这样做:

$("#home_btn").on('click',function(e){
    e.preventDefault();
    var lct = $('#select').children(":selected").attr("id");
    document.location.hash = '#' + lct;
});

答案 2 :(得分:0)

试试这个

$("#home_btn").on('click',function(e) {
    var lct = $('#select').val();
    document.location.hash= '#' + lct;
});

答案 3 :(得分:0)

Working Demo

更正您的HTML

ID必须是唯一的。因此,您可以在下拉列表中使用data-id属性

<select class="dropdown" id="select">
    <option>Choose a service</option>
    <option data-id="physio_content">Physiotheraphy</option>
    <option data-id="nurse_content">Nursing</option>
    <option data-id="doctor_content">Doctor</option>
    <option>Training attendant</option>
</select>

<强> JS

$("#home_btn").on('click', function (e) {
    e.preventDefault(); //stop default behavior of anchor tag 
    var lct = $('#select option:selected').data('id');
    if (lct !== '' && lct !== undefined) { //if data-id is not empty
        document.location.hash = '#' + lct; //jump the location of div
    }
});

.data()

event.preventdefault()

阅读two-html-elements-with-same-id-attribute-how-bad-is-it-really