Загрузка значений из базы данных в JavaScript в выбранном теге

Question

Я новичок в JavaScript. Моя проблема в том, что у меня есть 3 выбранных тега HTML. один для страны, следующий для штата и последний для города. У меня есть разные таблицы, такие как страны, штаты, города. проблема в том, что когда я щелкаю конкретную страну, соответствующие состояния будут загружаться с использованием события onchange в java-скрипте. после его загрузки мне нужно щелкнуть состояние, после чего должны загрузиться соответствующие города.

но я не знаю кодировку. если кто-нибудь есть, пожалуйста, пришлите мне. это срочно. мой босс ждет моего результата.

Answer 1

Если вы просто будете искать в Интернете, вы получите множество решений, из которых вы можете выбрать, в зависимости от используемой вами серверной технологии. Вот пример использования ASP.Net и JQuery

http://beyondrelational.com/modules/2/blogs/80/posts/10655/cascading-drop-down-examplecountry-state-and-city-in-jquery.aspx

StackOverflow - это не сайт, где вы можете получить работу от других. Вы должны приложить время и усилия, и только когда вы застряли без каких-либо доступных ответов, вы должны оставлять свои вопросы здесь. По этой причине я преуменьшаю ваш вопрос.

Answer 2

Если я правильно понял, вы хотите AJAX.

когда происходит событие onchange, код javascript отправляет запрос в PHP сервера (или любые другие сценарии сервера), который обрабатывает запросы, и отправляет данные обратно в javascript, который обрабатывает данные и выводит их пользователю.

Сам по себе код не знаю, но могу порекомендовать посмотреть на Jquery и его плагины, там вы обязательно найдете нужный код и быстро соберете весь процесс ..

РЕДАКТИРОВАТЬ: и я только что нашел ваш ответ благодаря другому ответу: Каскадный выпадающий список с использованием jQuery / PHP

Answer 3

JS:

var states = new Array();

states['Canada'] = new Array('Alberta','British Columbia','Ontario');
states['Mexico'] = new Array('Baja California','Chihuahua','Jalisco');
states['United States'] = new Array('California','Florida','New York');


// City lists
var cities = new Array();

cities['Canada'] = new Array();
cities['Canada']['Alberta']          = new Array('Edmonton','Calgary');
cities['Canada']['British Columbia'] = new Array('Victoria','Vancouver');
cities['Canada']['Ontario']          = new Array('Toronto','Hamilton');

cities['Mexico'] = new Array();
cities['Mexico']['Baja California'] = new Array('Tijauna','Mexicali');
cities['Mexico']['Chihuahua']       = new Array('Ciudad Juárez','Chihuahua');
cities['Mexico']['Jalisco']         = new Array('Guadalajara','Chapala');

cities['United States'] = new Array();
cities['United States']['California'] = new Array('Los Angeles','San Francisco');
cities['United States']['Florida']    = new Array('Miami','Orlando');
cities['United States']['New York']   = new Array('Buffalo','new York');


function setStates() {
  cntrySel = document.getElementById('country');
  stateList = states[cntrySel.value];
  changeSelect('state', stateList, stateList);
  setCities();
}

function setCities() {
  cntrySel = document.getElementById('country');
  stateSel = document.getElementById('state');
  cityList = cities[cntrySel.value][stateSel.value];
  changeSelect('city', cityList, cityList);
}

function changeSelect(fieldID, newOptions, newValues) {
  selectField = document.getElementById(fieldID);
  selectField.options.length = 0;
  for (i=0; i<newOptions.length; i++) {
    selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  setStates();
});

HTML:

<fieldset style="width: 230px;">
<legend><strong>Make your selection</strong></legend>
<p>
<form name="test" method="POST" action="processingpage.php">
<table>
<tr>
<td style="text-align: left;">Country:</td>
<td style="text-align: left;">
<select name="country" id="country" onchange="setStates();">
  <option value="Canada">Canada</option>
  <option value="Mexico">Mexico</option>
  <option value="United States">United States</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">State:</td>
<td style="text-align: left;">
<select name="state" id="state" onchange="setCities();">
  <option value="">Please select a Country</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="city"  id="city">
  <option value="">Please select a Country</option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>

Мне понадобилось 5 секунд, чтобы зайти в Google и вставить его.Пожалуйста, сделайте небольшое исследование перед публикацией.

Первоисточник: http://www.javascriptsource.com/forms/country-state-city-drop-down-list.html

Answer 4

Тебе придется заглянуть в AJAX. То, что вы пытаетесь достичь, чрезвычайно распространено. Есть множество примеров, если вы выполните быстрый поиск в Google для каскадных выпадающих списков .

Поскольку вы будете иметь дело с AJAX, я предлагаю вам начать с такой библиотеки, как jQuery , так как сборка для совместимости с браузером без нее занимает много времени.

Для начала вам понадобится базовая структура, подобная следующей:

$('#my-select').change(function() {
   // code that will be evaluated when #my-select changes
});

Оттуда вы бы инициировали запрос AJAX примерно так:

var country = $('#my-select').val();
$.post('/get-states', { country: country }, function(res) {
   // code that will be evaluated when the ajax request completes
});

В приведенном выше обратном вызове вы должны заполнить дочерние выпадающие списки.