Форум

u4enik12 · #1 (**permalink**) 12.06.2016, 11:57

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

рони · #2 (**permalink**) 12.06.2016, 12:38

u4enik12,
и в чём проблема проверить циклом все option втрого селекта по onchange в первом?

pureJS · #3 (**permalink**) 12.06.2016, 13:24

Сообщение от u4enik12

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

u4enik12, пожалуйста, используй знаки препинания (запятая и точка), а также начинай новые предложения с большой буквы, иначе очень плохо понятно что ты хочешь сделать.

Для большей понятности напиши сюда свой код с объяснениями в каких местах тебе непонятно.

EmperioAf · #4 (**permalink**) 12.06.2016, 17:06

<body>
    <select id="s1">
      <option value="2001">2001</option>
      <option value="2002">2002</option>
      <option value="2003">2003</option>
      <option value="2004">2004</option>
      <option value="2005">2005</option>
      <option value="2006">2006</option>
      <option value="2007">2007</option>
      <option value="2008">2008</option>
      <option value="2009">2009</option>
      <option value="20010">20010</option>
      <option value="20011">20011</option>
      <option value="20012">20012</option>
      <option value="20013">20013</option>
      <option value="20014">20014</option>
      <option value="20015">20015</option>
      <option value="20016">20016</option>
      <option value="20017">20017</option>
      <option value="20018">20018</option>
      <option value="20019">20019</option>
      <option value="20020">20020</option>
    </select>
    <select id="s2">
      <option value="2001">2001</option>
      <option value="2002">2002</option>
      <option value="2003">2003</option>
      <option value="2004">2004</option>
      <option value="2005">2005</option>
      <option value="2006">2006</option>
      <option value="2007">2007</option>
      <option value="2008">2008</option>
      <option value="2009">2009</option>
      <option value="20010">20010</option>
      <option value="20011">20011</option>
      <option value="20012">20012</option>
      <option value="20013">20013</option>
      <option value="20014">20014</option>
      <option value="20015">20015</option>
      <option value="20016">20016</option>
      <option value="20017">20017</option>
      <option value="20018">20018</option>
      <option value="20019">20019</option>
      <option value="20020">20020</option>
    </select>
    <script>
       var s1 = document.getElementById('s1'),
    s2 = document.getElementById('s2');

    s1.onchange = function () {
      s2.value = s1.value;
      for (var i = s2.selectedIndex - 1; i >= 0; i--) {
      s2.options.remove(i);
      }
    }
    </script>
</body>

рони · #5 (**permalink**) 12.06.2016, 17:10

EmperioAf,
нельзя выбрать дважды

EmperioAf · #6 (**permalink**) 12.06.2016, 17:26

Сообщение от рони

EmperioAf,
нельзя выбрать дважды

нельзя; но ведь автор об этом не писал. Всегда можно перезагрузить html-страницу

рони · #7 (**permalink**) 12.06.2016, 20:10

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
</head>

<body>
    <select>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    </select>
    <select>
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    <option value="2003">2003</option>
    <option value="2004">2004</option>
    <option value="2005">2005</option>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    <option value="2009">2009</option>
    <option value="2010">2010</option>
    <option value="2011">2011</option>
    <option value="2012">2012</option>
    <option value="2013">2013</option>
    <option value="2014">2014</option>
    <option value="2015">2015</option>
    <option value="2016">2016</option>
    <option value="2017">2017</option>
    <option value="2018">2018</option>
    <option value="2019">2019</option>
    <option value="2020">2020</option>
    </select>

<script>
window.addEventListener("DOMContentLoaded", function() {
    var a = document.querySelectorAll("select"),
        e = a[1].options,
        c = a[1].querySelectorAll("option");
    a[0].addEventListener("change", function() {
        for (var f = a[1].value, d = +this.value, b = e.length = 0; b < c.length; b++) + c[b].value >= +d && e.add(c[b], -1);
        a[1].value = f > d ? f : d
    })
});
</script>
</body>


</html>

hhh · #8 (**permalink**) 12.06.2016, 23:14

<select id="test">
  <option>Гек</option>
  <option>Том</option>
  <option>Сид</option>
  <option>Джим</option>
</select>
<select>
  <option>Гек</option>
  <option>Том</option>
  <option>Сид</option>
  <option>Джим</option>
</select>
<script>

var selectColletion = document.querySelectorAll('select'),
    firstSelect = selectColletion[0],
    lastSelect = selectColletion[1];

    firstSelect.onchange = function() {
      if (this.selectedIndex >= lastSelect.selectedIndex) {
        lastSelect.value = this.value;

        for (var i = 0; i < lastSelect.selectedIndex; i++) {
          lastSelect.options[i].style.display = "none";
        }
      } else {
        lastSelect.value = this.value;
        for (var i = 0; i < lastSelect.length; i++) {
          if (i < lastSelect.selectedIndex) continue;
          lastSelect.options[i].style.display = "block";
        }

      }

    };

</script>

destus · #9 (**permalink**) 13.06.2016, 10:40

Вариант.

<select>
	<option value="2000">2000</option>
	<option value="2001">2001</option>
	<option value="2002">2002</option>
	<option value="2003">2003</option>
	<option value="2004">2004</option>
	<option value="2005">2005</option>
	<option value="2006">2006</option>
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	<option value="2017">2017</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
</select>
<select>
	<option value="2000">2000</option>
	<option value="2001">2001</option>
	<option value="2002">2002</option>
	<option value="2003">2003</option>
	<option value="2004">2004</option>
	<option value="2005">2005</option>
	<option value="2006">2006</option>
	<option value="2007">2007</option>
	<option value="2008">2008</option>
	<option value="2009">2009</option>
	<option value="2010">2010</option>
	<option value="2011">2011</option>
	<option value="2012">2012</option>
	<option value="2013">2013</option>
	<option value="2014">2014</option>
	<option value="2015">2015</option>
	<option value="2016">2016</option>
	<option value="2017">2017</option>
	<option value="2018">2018</option>
	<option value="2019">2019</option>
	<option value="2020">2020</option>
</select>
<script>
let [s1, s2] = document.querySelectorAll("select"),
    fragment = document.createDocumentFragment();
s1.addEventListener("change", e => {
    let val = s2.value;
    for (let x  of e.target.options){
       x.value >= e.target.value && fragment.appendChild(x.cloneNode(true));
    }
    s2.options.length = 0;
    s2.appendChild(fragment);
    val > e.target.value  && (s2.value = val);
});
</script>

Форум

Справочник

Discord чат

Курсы javascript