ड्रॉपडाउन चयन

पर आधारित डेटाबेस से एक और चुनिंदा ड्रॉपडाउन पॉप्युलेट करें मैं कोडिंग सीखने के लिए एक वेबसाइट बना रहा हूं और एक ऐसा टूल बनाने की कोशिश कर रहा हूं जहां उपयोगकर्ता किसी चुनिंदा/ड्रॉपडाउन पर क्लिक करता है जिसमें डेटाबेस बिल्ली से कुछ श्रेणी नाम शामिल होते हैं और फिर एक और चयन डेटाबेस सबकैट से निकाले गए उपश्रेणी नामों के साथ दिखाई देगा। यह लगभग येलप की तरह है (श्रेणियों पर जाएं) like Yelp's (go down to the categories)।ड्रॉपडाउन चयन

enter image description here

मैं पहले से ही एक वर्ग लटकती कि बिल्ली डेटाबेस से खींच रहा है है:

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?>

और मैं एक subcat कि से खींच रहा है है

मैं भी एक चित्र बनाया उपकैट डेटाबेस:

<p><b>Subcat1:</b><br /> 
<?php 
    $query="SELECT id,subcat FROM subcat"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

उपयोगकर्ता श्रेणी पर क्लिक करने और इसे स्वचालित रूप से प्रदर्शित करने के आधार पर उपश्रेणी ड्रॉपडाउन कैसे बना सकता हूं? किसी भी और सभी मदद के लिए बहुत बहुत धन्यवाद!

स्रोत

2012-07-24 infinity

मैं सिर्फ जावास्क्रिप्ट में चर के साथ चर डालता हूं और फिर जावास्क्रिप्ट कार्यों का उपयोग करता हूं .. कोई jquery या AJAX आवश्यक नहीं है।

लेकिन अगर आप कोई बात नहीं उपश्रेणियों के लिए एक विदेशी कुंजी की आवश्यकता है क्या .. यानी - subcat तालिका में हर रिकॉर्ड के लिए आप संदर्भित करने के लिए तो ...

<?php 
    $db = new mysqli('localhost','user','password','dbname');//set your database handler 
    $query = "SELECT id,cat FROM cat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $categories[] = array("id" => $row['id'], "val" => $row['cat']); 
    } 

    $query = "SELECT id, catid, subcat FROM subcat"; 
    $result = $db->query($query); 

    while($row = $result->fetch_assoc()){ 
    $subcats[$row['catid']][] = array("id" => $row['id'], "val" => $row['subcat']); 
    } 

    $jsonCats = json_encode($categories); 
    $jsonSubCats = json_encode($subcats); 


?> 

<!docytpe html> 
<html> 

    <head> 
    <script type='text/javascript'> 
     <?php 
     echo "var categories = $jsonCats; \n"; 
     echo "var subcats = $jsonSubCats; \n"; 
     ?> 
     function loadCategories(){ 
     var select = document.getElementById("categoriesSelect"); 
     select.onchange = updateSubCats; 
     for(var i = 0; i < categories.length; i++){ 
      select.options[i] = new Option(categories[i].val,categories[i].id);   
     } 
     } 
     function updateSubCats(){ 
     var catSelect = this; 
     var catid = this.value; 
     var subcatSelect = document.getElementById("subcatsSelect"); 
     subcatSelect.options.length = 0; //delete all options if any present 
     for(var i = 0; i < subcats[catid].length; i++){ 
      subcatSelect.options[i] = new Option(subcats[catid][i].val,subcats[catid][i].id); 
     } 
     } 
    </script> 

    </head> 

    <body onload='loadCategories()'> 
    <select id='categoriesSelect'> 
    </select> 

    <select id='subcatsSelect'> 
    </select> 
    </body> 
</html>

स्रोत

2012-07-24 18:03:58 dano

आप मैं देखेंगे यह एक CatID देने की आवश्यकता उपकैम से चयनित कैटिड भी ताकि आप उपकैट्स को बिल्ली से जोड़ सकें .. यह आवश्यक है – dano

अरे इसके लिए धन्यवाद! महान काम किया!मैं इसे ऐसा करने के लिए कैसे प्राप्त कर सकता हूं जैसे ड्रॉपडाउन के तीन सेट बस इसी तरह? – infinity

हाँ कोई समस्या नहीं .. दूसरी बूंद पर आधारित तीसरा ड्रॉपडाउन मुझे लगता है? – dano

यदि आप AJAX का उपयोग कर रहे हैं, तो आप चाहते हैं कि कोड का दूसरा बिट एक अलग php फ़ाइल हो जिसे आप AJAX के माध्यम से कॉल करेंगे। AJAX कॉल से कॉलबैक में, बस करें (छद्म कोड): someContainingDivOrSomething.innerHtml = responseBody;।

ध्यान दें कि आम तौर पर आपकी PHP डिस्प्ले फ़ाइलों में सीधे पूछताछ करना (चिंताओं को अलग करना) एक बुरा विचार है। कई अन्य चीजें हैं जिन्हें बेहतर किया जा सकता है। हालांकि, यह आपको शुरू कर देगा।

स्रोत

2012-07-24 17:43:19

चूंकि आपकी उप-श्रेणी ड्रॉप डाउन में डेटा श्रेणी में चयनित चीज़ों पर निर्भर है, तो आप शायद AJAX का उपयोग करना चाहते हैं। आप अपनी श्रेणी ड्रॉप डाउन पर एक ईवेंट श्रोता सेट कर सकते हैं और जब यह बदलता है तो आप उपश्रेणी ड्रॉप डाउन के लिए डेटा का अनुरोध कर सकते हैं और इसे पॉप्युलेट कर सकते हैं, इसके बारे में जाने के कई अलग-अलग तरीके हैं, नीचे एक विकल्प है (jquery का उपयोग करके) शुरू कर दिया है।

// warning sub optimal jquery code 
$(function(){ 

    // listen to events on the category dropdown 
    $('#cat').change(function(){ 

     // don't do anything if use selects "Select Cat" 
     if($(this).val() !== "Select Cat") { 

      // subcat.php would return the list of option elements 
      // based on the category provided, if you have spaces in 
      // your values you will need to escape the values 
      $.get('subcat.php?cat='+ $(this).val(), function(result){ 
       $('#subcat').html(result); 
      }); 

     } 

    }); 

});

स्रोत

2012-07-24 17:49:07

मेकअप लैंडिंग पृष्ठ

<p><b>Category:</b><br /> 
<?php 
    $query="SELECT id,cat FROM cat"; 
    $result = mysql_query ($query); 
    echo"<select name='cselect3' onChange='loadSubCats(this.value)' class='e1'><option value='0'>Please Select A  Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
    echo "<option value=\"".htmlspecialchars($catinfo['cat'])."\">".$catinfo['cat']." </option>"; 

    } 

echo"</select>"; 
?> 

<div id='sub_categories'></div>

पर इस एचटीएमएल संरचना अपने load_sub_cats.php में

function loadSubCats(value) 
{ 
    $.post('load_sub_cats.php',{catid : value},function{data} 
              { 
               $('#sub_categories').html(data); 

              }); 

}

अब श्रेणी लटकती को आवंटित किए गए js समारोह बनाने

<p><b>Subcat1:</b><br /> 
<?php 
    $catid = $_POST['cat_id'] 
    $query="SELECT id,subcat FROM subcat where catid = $catid"; 
    $result = mysql_query ($query); 
    echo"<select name='sselect1' class='e1'><option value='0'>Please Select A Category</option>"; 
    // printing the list box select command 
    while($catinfo=mysql_fetch_array($result)){//Array or records stored in $nt 
     echo "<option value=\"".htmlspecialchars($catinfo['subcat'])."\">".$catinfo['subcat']."</option>"; 

    } 

echo"</select>"; 
?>

आपको चाहिये होगा इस कोड के काम में jquery शामिल करने के लिए।

स्रोत

2012-07-24 17:57:15

ड्रॉपडाउन चयन

उत्तर

संबंधित मुद्दे