Szűkített JS keresés DB

makgab · 2012. Jún. 1. (P), 20.09

Üdv!

Korábban találtam egy JS-es kereső szűkítést. Az ország (Country) <select> kiválasztásakor az állam/megye (State) <select> elemeit szűkíti.
Miben különbözik az egész JS/html oldal, ha a select-ekben PHP adatbázisból generált elemek vannak és nem statikus HTML kód? A lenti példában a <select> elemeit a JS tartalmazza. Tehát miben más a JS, ha a <select> elemeit PHP adatbázisból tölti fel?

Itt a statikus HTML kód minta:

<HTML>
<HEAD>
<TITLE>The JavaScript Source: Forms : Country State Drop Down</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
<META NAME="description" CONTENT="A simple international country and state drop down list that automatically repopulates the state section based on the country selected without page refreshes.">
<META NAME="date" CONTENT="2005-12-09">
<META NAME="channel" CONTENT="Developer">
<META NAME="author" CONTENT="Down Home Consulting">
<META NAME="section" CONTENT="Forms">
<script type="text/javascript">
<!--
// If you have PHP you can set the post values like this
//var postState = '<?= $_POST["state"] ?>';
//var postCountry = '<?= $_POST["country"] ?>';
var postState = '';
var postCountry = '';
// State table
//
var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
US:AS:American Samoa|\
// ...stb.
';
// Country data table
//
var country = '\
AF:Afghanistan|\
AL:Albania|\
DZ:Algeria|\
AS:American Samoa|\
AD:Andorra|\
AO:Angola|\
// ...stb.
';
function TrimString(sInString) {
if ( sInString ) {
sInStringsInString = sInString.replace( /^\s+/g, "" );// strip leading
return sInString.replace( /\s+$/g, "" );// strip trailing
}
}
// Populates the country selected with the counties from the country list
function populateCountry(defaultCountry) {
if ( postCountry != '' ) {
defaultCountry = postCountry;
}
var countrycountryLineArray = country.split('|'); // Split into lines
var selObj = document.getElementById('countrySelect');
selObj.options[0] = new Option('Select Country','');
selObj.selectedIndex = 0;
for (var loop = 0; loop < countryLineArray.length; loop++) {
lineArray = countryLineArray[loop].split(':');
countryCode = TrimString(lineArray[0]);
countryName = TrimString(lineArray[1]);
if ( countryCode != '' ) {
selObj.options[loop + 1] = new Option(countryName, countryCode);
}
if ( defaultCountry == countryCode ) {
selObj.selectedIndex = loop + 1;
}
}
}
function populateState() {
var selObj = document.getElementById('stateSelect');
var foundState = false;
// Empty options just in case new drop down is shorter
if ( selObj.type == 'select-one' ) {
for (var i = 0; i < selObj.options.length; i++) {
selObj.options[i] = null;
}
selObj.options.length=null;
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
// Populate the drop down with states from the selected country
var statestateLineArray = state.split("|"); // Split into lines
var optionCntr = 1;
for (var loop = 0; loop < stateLineArray.length; loop++) {
lineArray = stateLineArray[loop].split(":");
countryCode = TrimString(lineArray[0]);
stateCode = TrimString(lineArray[1]);
stateName = TrimString(lineArray[2]);
if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
// If it's a input element, change it to a select
if ( selObj.type == 'text' ) {
parentObj = document.getElementById('stateSelect').parentNode;
parentObj.removeChild(selObj);
var inputSel = document.createElement("SELECT");
inputSel.setAttribute("name","state");
inputSel.setAttribute("id","stateSelect");
parentObj.appendChild(inputSel) ;
selObj = document.getElementById('stateSelect');
selObj.options[0] = new Option('Select State','');
selObj.selectedIndex = 0;
}
if ( stateCode != '' ) {
selObj.options[optionCntr] = new Option(stateName, stateCode);
}
// See if it's selected from a previous post
if ( stateCode == postState && countryCode == postCountry ) {
selObj.selectedIndex = optionCntr;
}
foundState = true;
optionCntr++
}
}
// If the country has no states, change the select to a text box
if ( ! foundState ) {
parentObj = document.getElementById('stateSelect').parentNode;
parentObj.removeChild(selObj);
// Create the Input Field
var inputEl = document.createElement("INPUT");
inputEl.setAttribute("id", "stateSelect");
inputEl.setAttribute("type", "text");
inputEl.setAttribute("name", "state");
inputEl.setAttribute("size", 20);
inputEl.setAttribute("value", postState);
parentObj.appendChild(inputEl) ;
}
}
function initCountry(country) {
populateCountry(country);
populateState();
}
//-->
</script>
</HEAD>
<BODY BGCOLOR=#ffffff vlink=#0000ff>
<BR>
<center>
<BR>
<BR>
<form>
<table border="0">
<tr>
<td>
<select id='countrySelect' name='country' onchange='populateState()'>
</select>
</td>
<td>
<select id='stateSelect' name='state'>
</select>
<script type="text/javascript">initCountry('US'); </script>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>


<HTML>
<HEAD>
<TITLE>The JavaScript Source: Forms : Country State Drop Down</TITLE>
<META HTTP-EQUIV="The JavaScript Source" CONTENT = "no-cache">
<META NAME="description" CONTENT="A simple international country and state drop down list that automatically repopulates the state section based on the country selected without page refreshes.">
<META NAME="date" CONTENT="2005-12-09">
<META NAME="channel" CONTENT="Developer">
<META NAME="author" CONTENT="Down Home Consulting">
<META NAME="section" CONTENT="Forms">

<script type="text/javascript">
<!--
// If you have PHP you can set the post values like this
//var postState = '<?= $_POST["state"] ?>';
//var postCountry = '<?= $_POST["country"] ?>';
var postState = '';
var postCountry = '';

// State table
//
var state = '\
US:AK:Alaska|\
US:AL:Alabama|\
US:AR:Arkansas|\
US:AS:American Samoa|\
// ...stb.
';

// Country data table
//
var country = '\
AF:Afghanistan|\
AL:Albania|\
DZ:Algeria|\
AS:American Samoa|\
AD:Andorra|\
AO:Angola|\
// ...stb.
';

function TrimString(sInString) {
  if ( sInString ) {
    sInString = sInString.replace( /^\s+/g, "" );// strip leading
    return sInString.replace( /\s+$/g, "" );// strip trailing
  }
}

// Populates the country selected with the counties from the country list
function populateCountry(defaultCountry) {
  if ( postCountry != '' ) {
    defaultCountry = postCountry;
  }
  var countryLineArray = country.split('|');  // Split into lines
  var selObj = document.getElementById('countrySelect');
  selObj.options[0] = new Option('Select Country','');
  selObj.selectedIndex = 0;
  for (var loop = 0; loop < countryLineArray.length; loop++) {
    lineArray = countryLineArray[loop].split(':');
    countryCode  = TrimString(lineArray[0]);
    countryName  = TrimString(lineArray[1]);
    if ( countryCode != '' ) {
      selObj.options[loop + 1] = new Option(countryName, countryCode);
    }
    if ( defaultCountry == countryCode ) {
      selObj.selectedIndex = loop + 1;
    }
  }
}

function populateState() {
  var selObj = document.getElementById('stateSelect');
  var foundState = false;
  // Empty options just in case new drop down is shorter
  if ( selObj.type == 'select-one' ) {
    for (var i = 0; i < selObj.options.length; i++) {
      selObj.options[i] = null;
    }
    selObj.options.length=null;
    selObj.options[0] = new Option('Select State','');
    selObj.selectedIndex = 0;
  }
  // Populate the drop down with states from the selected country
  var stateLineArray = state.split("|");  // Split into lines
  var optionCntr = 1;
  for (var loop = 0; loop < stateLineArray.length; loop++) {
    lineArray = stateLineArray[loop].split(":");
    countryCode  = TrimString(lineArray[0]);
    stateCode    = TrimString(lineArray[1]);
    stateName    = TrimString(lineArray[2]);
  if (document.getElementById('countrySelect').value == countryCode && countryCode != '' ) {
    // If it's a input element, change it to a select
      if ( selObj.type == 'text' ) {
        parentObj = document.getElementById('stateSelect').parentNode;
        parentObj.removeChild(selObj);
        var inputSel = document.createElement("SELECT");
        inputSel.setAttribute("name","state");
        inputSel.setAttribute("id","stateSelect");
        parentObj.appendChild(inputSel) ;
        selObj = document.getElementById('stateSelect');
        selObj.options[0] = new Option('Select State','');
        selObj.selectedIndex = 0;
      }
      if ( stateCode != '' ) {
        selObj.options[optionCntr] = new Option(stateName, stateCode);
      }
      // See if it's selected from a previous post
      if ( stateCode == postState && countryCode == postCountry ) {
        selObj.selectedIndex = optionCntr;
      }
      foundState = true;
      optionCntr++
    }
  }
  // If the country has no states, change the select to a text box
  if ( ! foundState ) {
    parentObj = document.getElementById('stateSelect').parentNode;
    parentObj.removeChild(selObj);
  // Create the Input Field
    var inputEl = document.createElement("INPUT");
    inputEl.setAttribute("id", "stateSelect");
    inputEl.setAttribute("type", "text");
    inputEl.setAttribute("name", "state");
    inputEl.setAttribute("size", 20);
    inputEl.setAttribute("value", postState);
    parentObj.appendChild(inputEl) ;
  }
}

function initCountry(country) {
  populateCountry(country);
  populateState();
}
//-->
</script>


</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>

<BR>
<BR>
<!-- Demonstration -->
<form>
  <table border="0">

    <tr>
      <td>
        <select id='countrySelect' name='country' onchange='populateState()'>
        </select>
        </td>
        <td>
        <select id='stateSelect' name='state'>
        </select>
        <script type="text/javascript">initCountry('US'); </script>

      </td>
    </tr>
  </table>
</form>


</center>
</body>
</html>

■

HTML, CSS, JavaScript, Ajax

csirip

Miben különbözik az egész

Poetro · 2012. Jún. 1. (P), 22.25

Miben különbözik az egész JS/html oldal, ha a select-ekben PHP adatbázisból generált elemek vannak és nem statikus HTML kód.

Semmiben, mivel a PHP is HTML-t generál. Mondjuk jó lenne a kérdő mondatok végén kérdőjel, csak hogy egyértelmű legyen.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

PHP -> JS

makgab · 2012. Jún. 2. (Szo), 09.56

Mondjuk jó lenne a kérdő mondatok végén kérdőjel, csak hogy egyértelmű legyen.

Ok, javítottam. :)

Tehát a szép, elegáns megoldást kerestem erre. De akkor erre az a szép megoldás, hogy PHP-ból generáljam a JS forrását a <select> elemekhez?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Ha több select-ed van és

therest · 2012. Jún. 5. (K), 12.01

Ha több select-ed van és select-ek függnek egymástól, pl Ország->Megye->Település akkor valamiféle ajaxos betöltés a legszebb talán. Így select-ek onchange eseményekor, nem kell az egész oldalt betölteni, és js-t sem kell php-ból html-be nyomni.
JQuery ajax, JSON formátumban való kéréssel, php oldalon meg a megfelelő DB select, és egy echo JSON encode. Az ajax kérés által visszaadott json objektumból aztán könnyedén felépíted a selectjeid javascriptben.

(Nem olvastam végig a teljes forrást, ha valamit félreértettem, akkor bocs.)

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés