Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
TheBadRabbit
0 / 0 / 0
Регистрация: 23.06.2018
Сообщений: 6
1

Выбор данных из select

23.06.2018, 21:35. Просмотров 182. Ответов 9

Доброго всем времени суток! В js да и вообще в программировании новичок. Ломаю голову- как создать селект с выбором городов после выбора определенной страны. В данном варианте при смене страны и создания option ставится только последний элемент массива. Как можно этот код поменять для решения задачи?Подскажите пожалуйста!
код:

<select id="select">
<option value="one" >Россия</option>
<option value="two" >США</option>
<option value="three">Китай</option>
</select>

js:
var select = document.getElementById('select');
select.addEventListener('click', func);

function func() {
var newselect=document.createElement('select');
newselect.name='newselect';
var options=document.createElement('option');
newselect.appendChild(options);
document.body.appendChild(newselect);
select.addEventListener('change', function addOption() {

if (select.selectedIndex==0){

var gorodaru=['мск', 'влг','спб'];
for (var i = 0; i < gorodaru.length; i++) {
options.text=gorodaru[i];
options.value=gorodaru[i];
}
};

if (select.selectedIndex==1){
var gorodaus=['vash', 'new','atl'];
for (var i = 0; i < gorodaus.length; i++) {
options.text=gorodaus[i];
options.value=gorodaus[i];

}
};

if (select.selectedIndex==2){
var gorodach=['shanh', 'pek','lao'];
for (var i = 0; i < gorodach.length; i++) {
options.text=gorodach[i];
options.value=gorodach[i];

}
};/**/

});
select.removeEventListener('click', func);
};
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
23.06.2018, 21:35
Ответы с готовыми решениями:

Перекидывание данных из одного <select>...</select> в другой
Yest dve korobki tipa &lt;select&gt;...&lt;/select&gt;: odna bitkom nabitaya dannimi s bazi...

Выбор в select
Добрый день. Не могу решить простую задачку. Помогите пожалуйста.(перерыл весь...

Запретить выбор опции в select по её ID
Здравствуйте, подскажите пожалуйста, как в селекте запретить выбор опции по ее...

Программный выбор SELECT OPTION
Не получается сделать программный выбор из выпадающего списка. У SELECT...

Выбор input в зависимости от выбора select
Есть: input id=&quot;editbox1&quot;-ширина; input id=&quot;editbox2&quot;-высота; select...

9
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
23.06.2018, 21:46 2
Все правильно работает, по клику у вас создается новый селект, к нему дописывается option, затем у него меняется значение столько раз сколько отрабатывает цикл, а так как option у вас только один то остается последнее значение после работы цикла.
Вам нужно создавать и аппендить option к селекту в самом цикле, и в конце функции аппендить селект на страницу
0
Qwerty_Wasd
1113 / 813 / 413
Регистрация: 16.04.2016
Сообщений: 2,208
Завершенные тесты: 2
23.06.2018, 22:25 3
AlexZaw, приветствую Почему не посоветовали убрать лишний обработчик? Каждый раз когда ТС тыкает в селект, он создается - зачем?
Если без прикрас писать - https://codepen.io/qwerty_wasd/pen/ZRRrbX
HTML5
1
2
3
4
5
6
7
8
9
<select class="sel-group" id="toggleSel">
  <option>---</option>
  <option>Россия</option>
  <option>США</option>
  <option>Китай</option>
</select>
<select class="sel-group" id="result" disabled="disabled">
  <option>---</option>
</select>
CSS
1
.sel-group{width:150px}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
toggleSel.addEventListener('change',function(){
  if(toggleSel.value=='Россия') {
    result.innerHTML='';
    let rusCity=['---','Санкт-Петербург','Москва','Новосибирск'];
    for(let i=0;i<rusCity.length;i++){
      let options = new Option(rusCity[i]);      
      result.appendChild(options);
    }
    result.removeAttribute('disabled')
  }
  if(toggleSel.value=='США') {
    result.innerHTML='';
    let rusCity=['---','Вашингтон','Нью-Йорк','Лос-Анджелес'];
    for(let i=0;i<rusCity.length;i++){
      let options = new Option(rusCity[i]);      
      result.appendChild(options);
    }
    result.removeAttribute('disabled')
  }
  if(toggleSel.value=='Китай') {
    result.innerHTML='';
    let rusCity=['---','Шанхай','Пекин','Тяньцзинь'];
    for(let i=0;i<rusCity.length;i++){
      let options = new Option(rusCity[i]);      
      result.appendChild(options);
    }
    result.removeAttribute('disabled')
  }
  if(toggleSel.value=='---') {
    for(let i=1;i<result.options.length;i++){
      result.options[i].outerHTML=''
    }
    result.setAttribute('disabled','disabled')
  }
})
0
AlexZaw
572 / 568 / 265
Регистрация: 07.08.2016
Сообщений: 1,867
Завершенные тесты: 2
23.06.2018, 22:34 4
Qwerty_Wasd, Доброго времени суток!
Цитата Сообщение от Qwerty_Wasd Посмотреть сообщение
Почему не посоветовали убрать лишний обработчик?
Если честно то даже не подумал про то, что он лишний, ответ писался почти в 2 ночи, голова уже не так хорошо соображает
0
Qwerty_Wasd
23.06.2018, 22:35
  #5

Не по теме:

AlexZaw, заработались:) бывает.

0
mrtoxas
Модератор
Эксперт HTML/CSS
2591 / 1917 / 1192
Регистрация: 12.07.2015
Сообщений: 5,137
Записей в блоге: 3
24.06.2018, 00:55 6
Или так
CSS
1
2
3
select{
  width:200px;
}
HTML5
1
2
3
4
5
6
7
8
<select id="countrySelect">
  <option selected disabled></option>
  <option>Россия</option>
  <option>США</option>
  <option>Китай</option>
</select>
 
<select id="citySelect" disabled></select>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var evCountries = {
  Россия: ["Санкт-Петербург", "Москва", "Новосибирск"],
  США: ["Вашингтон", "Нью-Йорк", "Лос-Анджелес"],
  Китай: ["Шанхай", "Пекин", "Тяньцзинь"]
}; 
countrySelect.onchange = function(){  
  if (citySelect.disabled){
    citySelect.disabled = false;
  }  
  var city = evCountries[this.options[this.selectedIndex].textContent];
  citySelect.options.length = 0;
  for(i=0; i < city.length; i++){    
    citySelect.options[citySelect.options.length] = new Option(city[i], i);
  }     
}
0
Qwerty_Wasd
1113 / 813 / 413
Регистрация: 16.04.2016
Сообщений: 2,208
Завершенные тесты: 2
24.06.2018, 03:34 7
Вот еще варик
HTML5
1
2
3
4
5
6
7
8
<select class="sel-group" id="toggleSel"> 
  <option>Россия</option>
  <option>США</option>
  <option>Китай</option>
</select>
<select class="sel-group" id="result" disabled="disabled">
  <option>---</option>
</select>
CSS
1
.sel-group{width:150px}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const toggleOpt=function(){
  const country=['Россия','США','Китай'],
        city=[['Санкт-Петербург','Москва','Новосибирск'],
              ['Вашингтон','Нью-Йорк','Лос-Анджелес'],
              ['Шанхай','Пекин','Тяньцзинь']];  
  country.filter((e,i)=>{    
    if(toggleSel.value==e) {
      result.innerHTML='';
      city[i].forEach(el=>{
        let optionsRes=new Option(el);
        result.appendChild(optionsRes);        
      });
      result.removeAttribute('disabled');
    }
  });
}
toggleSel.addEventListener('change',toggleOpt);
window.onunload=()=>toggleSel.removeEventListener('change',toggleOpt);
0
TheBadRabbit
0 / 0 / 0
Регистрация: 23.06.2018
Сообщений: 6
24.06.2018, 20:16  [ТС] 8
Большое спасибо за советы! Буду пробовать доработать. Только в задании звучит-при выборе страны появляется select с выбором городов, то есть изначально в разметке его нет. Вот и пытаюсь создать его сначала при клике, а потом добавить к нему опции...
0
mrtoxas
Модератор
Эксперт HTML/CSS
2591 / 1917 / 1192
Регистрация: 12.07.2015
Сообщений: 5,137
Записей в блоге: 3
24.06.2018, 20:40 9
TheBadRabbit, задайте изначально второму select'у стиль display:none, а потом, при выборе страны проверяйте скрыт ли он.

Добавлено через 7 минут
CSS
1
2
3
4
5
6
select{
  width:200px;
}
.js-select-hidden{
  display:none; 
}
HTML5
1
2
3
4
5
6
7
8
<select id="countrySelect">
  <option selected disabled></option>
  <option>Россия</option>
  <option>США</option>
  <option>Китай</option>
</select>
 
<select id="citySelect" class="js-select-hidden"></select>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var evCountries = {
  Россия: ["Санкт-Петербург", "Москва", "Новосибирск"],
  США: ["Вашингтон", "Нью-Йорк", "Лос-Анджелес"],
  Китай: ["Шанхай", "Пекин", "Тяньцзинь"]
}; 
countrySelect.onchange = function(){  
  if (citySelect.classList.contains('js-select-hidden')){
    citySelect.classList.remove('js-select-hidden');
  }  
  var city = evCountries[this.options[this.selectedIndex].textContent];
  citySelect.options.length = 0;
  for(i=0; i < city.length; i++){    
    citySelect.options[citySelect.options.length] = new Option(city[i], i);
  }     
}
1
TheBadRabbit
0 / 0 / 0
Регистрация: 23.06.2018
Сообщений: 6
26.06.2018, 13:15  [ТС] 10
Спасибо огромное! Все получилось!
0
26.06.2018, 13:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
26.06.2018, 13:15

Как остановить выбор <option> в <select>?
Мне нужно, чтобы при клике на &lt;option&gt; в &lt;select&gt; не происходило ничего, кроме...

Выбор select скрывает/показывать элементы таблицы
Здравствуйте, подскажите пожалуйста.., пишу калкулятор и для него необходимо...

Как сохранить выбор в select списке, сгенерированным JS?
Есть скрипт, который имеет список городов в файле, разделенных по регионам....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru