2010-09-14 21 views
9

0 के साथ अनुरोध प्राप्त करने के बाद एक्सचेंज रीलोड पेज, जब कोई ड्रॉपडाउन में कोई आइटम चुनता है, तो मैं क्वेरी पेजिंग में चयनित आइटम में आईडी के मान के साथ वर्तमान पृष्ठ को फिर से लोड करना चाहता हूं:jquery dropdownlist, ड्रॉपडाउन वैल्यू

http://www.example.com/mypage?id=234 

मैं यह कैसे कर सकता हूं?

+0

क्या आप ड्रॉपडाउन सूची का भी एक उदाहरण प्रदान कर सकते हैं? –

उत्तर

10

jQuery की आवश्यकता नहीं है। मूल जावास्क्रिप्ट आपको इस मामले में ठीक करेगा।

बस एक "onchange" घटना अपने ड्रॉप-डाउन करने के लिए

<select onchange="doAction(this.value);"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 

तो समारोह कहा जाता हो जाता है कि, अलग बिना जोड़ने के लिए, जोड़ने जब मूल्य में परिवर्तन

<script type="text/javascript"><!-- 
    function doAction(val){ 
     //Forward browser to new url 
     window.location='http://www.domain.com/mypage?id=' + val; 
    } 
--></script> 

या कॉम्पैक्ट संस्करण जेएस कोड

<select onchange="window.location='http://www.domain.com/mypage?id=' + this.value;"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 
20

आप आरए का उपयोग कर सकते हैं डब्ल्यू जावास्क्रिप्ट संस्करण जो डच 432 नोट किया गया या jQuery संस्करण।

<select id="the_select"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
<select> 

<script type="text/javascript"> 
$(function(){ 
    $("#the_select").change(function(){ 
    window.location='http://www.domain.com/mypage?id=' + this.value 
    }); 
}); 
</script> 
+0

ग्रेट फॉलो-अप। – Dutchie432

3
<select id="items" onselect="javascript:reloadPage(this)"> 
    <option name="item1">Item 1</option> 
</select> 

स्क्रिप्ट:

function reloadPage(id) { 
    document.location.href = location.href + '?id=' + id.value; 
} 
+1

दूसरा अनुरोध प्राप्त करने के बारे में क्या; यह वर्तमान यूआरएल में क्वेरी स्ट्रिंग को संलग्न नहीं करेगा जिसमें पहले से ही क्वेरी स्ट्रिंग है। –

-1

के बाद कोड सत्यापित जाएगा

  • यूआरएल है नहीं तो यह है कि यह जोड़ने संबंधित पैरामीटर चल रहा है।
  • यदि पैरामीटर पाया जाता है जो पैरामीटर को नए चयनित मान के साथ प्रतिस्थापित करता है।
  • पृष्ठ को दोबारा लोड करें।

    $(function() { 
        $("#the_select").change(function() { 
    
         if (window.location.href.indexOf("?") < 0) { 
          window.location.href = window.location.href + "?mypage="+ this.value; 
         } 
         else{ 
          window.location.href = replaceUrlParam(window.location.href, "mypage", this.value) 
         } 
    
        }); 
    }); 
    
    
    function replaceUrlParam(url, paramName, paramValue) 
    { 
        var pattern = new RegExp('\\b(' + paramName + '=).*?(&|$)') 
        if (url.search(pattern) >= 0) 
        { 
         return url.replace(pattern, '$1' + paramValue + '$2'); 
        } 
        return url + (url.indexOf('?') > 0 ? '&' : '?') + paramName + '=' + paramValue 
    } 
    
0

बेहतर <form> उपयोग करने के लिए है, क्योंकि किसी अन्य तरीके से, सभी क्षेत्रों URL में संलग्न नहीं है। इस कारण @BJ Patel इस समस्या को यहां दूसरे जवाब में हल करना चाहता था।
तो, यदि आप इसके लिए form का उपयोग करते हैं, तो किसी भी समय आपके पास फ़ॉर्म में एक और फ़ील्ड होगा, सबमिट करने के बाद सभी यूआरएल में नए मूल्य के साथ संलग्न और प्रतिस्थापित करें। देखें:

<form method="get" action="http://www.example.com/mypage" id="form"> 
    <select id="the_select" name="id"> 
    <option value="123">Go to 123</option> 
    <option value="456">Go to 456</option> 
    <option value="789">Go to 789</option> 
    <select> 
</form> 

<script type="text/javascript"> 
$(function(){ 
    $("#the_select").change(function(){ 
    $("#form").submit(); 
    }); 
}); 
</script> 
संबंधित मुद्दे