Форум

MichaelDiteeeeeeee · #1 (**permalink**) 19.02.2016, 12:31

Добрый день, участники это форума!
Возникла проблема, ищу решения.

Имею код:

<select name="from" required>
              
                <option selected="true" style="display:none;"> </option>
              
              <option>- Suvarnabhumi International Airport</option>
              <option>- Don Mueang International Airport</option>
              <option>-  Bangkok City</option>
              <option>- Hua Hin</option>
              <option>- Cha Am</option>
            </select>
            <br>
            
             <h2>Drop Off Location </h2>
            <select name="to" required>
                
              <option selected="true" style="display:none;"> </option>
              <option>- Suvarnabhumi International Airport</option>
              <option>- Don Mueang International Airport</option>
              <option>-  Bangkok City</option>
              <option>- Hua Hin</option>
              <option>- Cha Am</option>
            </select>

Затея такая:
Исключать из 2-го select Suvarnabhumi International Airport и Don Mueang International Airport, если выбраны Bangkok City , Hua Hin и Cha Am
И точно так же наооборот.Исключаем аэропорты ,если выбран город, точно так же исключаем городы при выборе аэропортов.

_______
Жду помощи, спасибо за внимание!

рони · #2 (**permalink**) 19.02.2016, 13:41

MichaelDiteeeeeeee,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

MichaelDiteeeeeeee · #3 (**permalink**) 19.02.2016, 14:50

Изменил. Пожалуйста, помогите.

рони · #4 (**permalink**) 19.02.2016, 15:24

MichaelDiteeeeeeee, медитируйте, а заодно и проведите тест и напишите результат.

<!DOCTYPE HTML>

<html>

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

<body>
<form action="http://" name="f">
<select name="from" required size="6"> <option></option>
 <option>- Suvarnabhumi International Airport</option>
 <option>- Don Mueang International Airport</option>
 <option>- Bangkok City</option>
 <option>- Hua Hin</option>
 <option>- Cha Am</option>
</select>
<select name="to" required size="6">  <option></option>
 <option>- Suvarnabhumi International Airport</option>
 <option>- Don Mueang International Airport</option>
 <option>- Bangkok City</option>
 <option>- Hua Hin</option>
 <option>- Cha Am</option>
</select>


<select name="test" required size="6"> <option></option>
 <option>- Suvarnabhumi International Airport</option>
 <option>- Don Mueang International Airport</option>
 <option>- Bangkok City</option>
 <option>- Hua Hin</option>
 <option>- Cha Am</option>
</select>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
    var selects = document.querySelectorAll("select"),
        opt = [],
        val = [];
    [].forEach.call(selects, function(sel, j) {
        opt[j] = sel.querySelectorAll("option");
        sel.addEventListener("change", function() {
            var v = [].map.call(selects, function(sel) {
                return sel.value
            });
            [].forEach.call(selects, function(sel, k) {
                sel.options.length = 0;
                for (var i = 0; i < opt[k].length; i++)(!~v.indexOf(opt[k][i].text) || opt[k][i].text == v[k] || !i) && sel.options.add(opt[k][i])
            })
        })
    })
});
</script>
</body>

</html>

MichaelDiteeeeeeee · #5 (**permalink**) 20.02.2016, 08:36

Вы не поняли, нужно исключать :

<option>- Bangkok City</option>
<option>- Hua Hin</option>
<option>- Cha Am</option>

Если выбран один из 2-х аэропортов и наооборот.
Помоги, пожалуйста.

destus · #6 (**permalink**) 20.02.2016, 09:38

MichaelDiteeeeeeee,

<script>
         document.addEventListener('DOMContentLoaded', function (e) {
             var selFrom = document.querySelector('select[name=from]'), selTo = document.querySelector('select[name=to]'), arr = [], pattern = /airport/i;
             selTo.disabled = true;
             selFrom.addEventListener('change', function (e) {
                selTo.innerHTML = selFrom.innerHTML;
                pattern.test(this.value) ? arr = [].filter.call(document.querySelector('select[name=to]'), function (el) {
                    return !(pattern.test(el.value));
                }) : arr = [].filter.call(document.querySelector('select[name=to]'), function (el) {
                    return pattern.test(el.value);
                })
                    selTo.options.length = 0;
                    [].forEach.call(arr, function (el) {
                        selTo.options.add(el);
                    });
                   selTo.disabled = false;
            })
        })
     </script>
     <select name="from" required>

        <option selected="true" style="display:none;"> </option>

        <option>- Suvarnabhumi International Airport</option>
        <option>- Don Mueang International Airport</option>
        <option>-  Bangkok City</option>
        <option>- Hua Hin</option>
        <option>- Cha Am</option>
    </select>
    <br>

    <h2>Drop Off Location </h2>
    <select name="to" required>

        <option selected="true" style="display:none;"> </option>
        <option>- Suvarnabhumi International Airport</option>
        <option>- Don Mueang International Airport</option>
        <option>-  Bangkok City</option>
        <option>- Hua Hin</option>
        <option>- Cha Am</option>
    </select>

Форум

Справочник

Discord чат

Курсы javascript