Выпадающий список с повторяющееся значение

<label>Service Offering</label></br> 
 
\t \t    <select style='color:black' id="first_choice" required name="first_pref"> 
 
\t \t    <option value="" disabled selected hidden>First preference</option> 
 
        <option value="Engineering and Design">Engineering and Design</option> 
 
\t \t    <option value="Operations and Design">Operations and Design</option> 
 
\t \t    <option value="Product management">Product management</option> 
 
\t \t    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
\t \t    <option value="Sales and account management">Sales and account management</option> 
 
\t \t    <option value="Partnerships">Partnerships</option> 
 
\t \t    <option value="Sales and operations">Sales and operations</option> 
 
\t     <option value="Administrative services">Administrative services</option> 
 
     \t    <option value="Business strategy planning">Business strategy planning</option> 
 
\t \t    <option value="Finance solutions">Finance solutions</option> 
 
\t \t    <option value="Legal and government relations">Legal and government relations</option> 
 
\t \t    <option value="Marketing and communications">Marketing and communications</option> 
 
\t \t    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
\t \t    <option value="Social impact solutions">Social impact solutions</option> 
 
\t \t    <option value="Consultancy services">Consultancy services</option> 
 
\t \t    <option value="Investors and funding">Investors and funding</option> 
 
      </select></br></br> 
 
\t \t \t \t \t \t \t \t <!--second preference--> 
 
\t \t \t \t \t \t \t \t <select style='color:black' id="second_choice" required name="second_pref"> 
 
\t \t    
 
\t \t    <option value="" disabled selected hidden>Second Preference</option> 
 
\t \t    <option value="Engineering and Design">Engineering and Design</option> 
 
\t \t    <option value="Operations and Design">Operations and Design</option> 
 
\t \t    <option value="Product management">Product management</option> 
 
\t \t    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
\t \t    <option value="Sales and account management">Sales and account management</option> 
 
\t \t    <option value="Partnerships">Partnerships</option> 
 
\t \t    <option value="Sales and operations">Sales and operations</option> 
 
\t     <option value="Administrative services">Administrative services</option> 
 
     \t    <option value="Business strategy planning">Business strategy planning</option> 
 
\t \t    <option value="Finance solutions">Finance solutions</option> 
 
\t \t    <option value="Legal and government relations">Legal and government relations</option> 
 
\t \t    <option value="Marketing and communications">Marketing and communications</option> 
 
\t \t    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
\t \t    <option value="Social impact solutions">Social impact solutions</option> 
 
\t \t    <option value="Consultancy services">Consultancy services</option> 
 
\t \t    <option value="Investors and funding">Investors and funding</option> 
 
      </select></br></br> 
 
\t \t \t <!--3rd preference--> 
 
\t \t \t \t \t \t \t \t <select style='color:black' id="third_choice" required name="third_pref"> 
 
\t \t    <option value="" disabled selected hidden>Third Preference</option> 
 
\t \t    <option value="Engineering and Design">Engineering and Design</option> 
 
\t \t    <option value="Operations and Design">Operations and Design</option> 
 
\t \t    <option value="Product management">Product management</option> 
 
\t \t    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
\t \t    <option value="Sales and account management">Sales and account management</option> 
 
\t \t    <option value="Partnerships">Partnerships</option> 
 
\t \t    <option value="Sales and operations">Sales and operations</option> 
 
\t     <option value="Administrative services">Administrative services</option> 
 
     \t    <option value="Business strategy planning">Business strategy planning</option> 
 
\t \t    <option value="Finance solutions">Finance solutions</option> 
 
\t \t    <option value="Legal and government relations">Legal and government relations</option> 
 
\t \t    <option value="Marketing and communications">Marketing and communications</option> 
 
\t \t    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
\t \t    <option value="Social impact solutions">Social impact solutions</option> 
 
\t \t    <option value="Consultancy services">Consultancy services</option> 
 
\t \t    <option value="Investors and funding">Investors and funding</option> 
 
      </select>

Я три выпадающие списки всех, содержащие одни и те же данные, но разные names.I хотят все три списка, которые будут выбраны с уникальным values.That означает, что, если выбран 1 в 1-м списке, тогда 1 становится недоступным для остальных двух списков. Как реализовать это в простой форме HTML.

источник

2016-07-12 Pratik Agarwal

Вы не можете сделать это, используя только HTML. Вам нужно будет использовать Javascript. – Jocelyn

Возможно, вам понадобится реализовать это с помощью Javascript, с некоторыми функциями, связанными с onClick представления. Вот демо:

function checkChoice() { 
 
    // Get choices and put into an array 
 
    var box1 = document.getElementById("first_choice"); 
 
    var box2 = document.getElementById("second_choice"); 
 
    var box3 = document.getElementById("third_choice"); 
 
    var choices = [ 
 
    box1.options[box1.selectedIndex].value, 
 
    box2.options[box2.selectedIndex].value, 
 
    box3.options[box3.selectedIndex].value 
 
    ]; 
 
    var valuesSoFar = Object.create(null); 
 
    for (var i = 0; i < choices.length; ++i) { 
 
    var value = choices[i]; 
 
    if (value in valuesSoFar) { 
 
     console.log("Found a duplicate"); 
 
     return false; // We found a duplicate, return false to stop form processing 
 
    } 
 
    valuesSoFar[value] = true; 
 
    } 
 
    console.log("No duplicates found"); 
 
    return true; // Everything is fine, continue 
 
}

<form method="POST" action="#"> 
 
    <label>Services Offered</label> 
 
    <br> 
 
    <br> 
 
    <select style='color:black' id="first_choice" required name="first_pref"> 
 
    <option value="firstp" disabled selected hidden>First Preference</option> 
 
    <option value="Engineering and Design">Engineering and Design</option> 
 
    <option value="Operations and Design">Operations and Design</option> 
 
    <option value="Product management">Product management</option> 
 
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
    <option value="Sales and account management">Sales and account management</option> 
 
    <option value="Partnerships">Partnerships</option> 
 
    <option value="Sales and operations">Sales and operations</option> 
 
    <option value="Administrative services">Administrative services</option> 
 
    <option value="Business strategy planning">Business strategy planning</option> 
 
    <option value="Finance solutions">Finance solutions</option> 
 
    <option value="Legal and government relations">Legal and government relations</option> 
 
    <option value="Marketing and communications">Marketing and communications</option> 
 
    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
    <option value="Social impact solutions">Social impact solutions</option> 
 
    <option value="Consultancy services">Consultancy services</option> 
 
    <option value="Investors and funding">Investors and funding</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <select style='color:black' id="second_choice" required name="second_pref"> 
 
    <option value="secondp" disabled selected hidden>Second Preference</option> 
 
    <option value="Engineering and Design">Engineering and Design</option> 
 
    <option value="Operations and Design">Operations and Design</option> 
 
    <option value="Product management">Product management</option> 
 
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
    <option value="Sales and account management">Sales and account management</option> 
 
    <option value="Partnerships">Partnerships</option> 
 
    <option value="Sales and operations">Sales and operations</option> 
 
    <option value="Administrative services">Administrative services</option> 
 
    <option value="Business strategy planning">Business strategy planning</option> 
 
    <option value="Finance solutions">Finance solutions</option> 
 
    <option value="Legal and government relations">Legal and government relations</option> 
 
    <option value="Marketing and communications">Marketing and communications</option> 
 
    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
    <option value="Social impact solutions">Social impact solutions</option> 
 
    <option value="Consultancy services">Consultancy services</option> 
 
    <option value="Investors and funding">Investors and funding</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <select style='color:black' id="third_choice" required name="third_pref"> 
 
    <option value="thirdp" disabled selected hidden>Third Preference</option> 
 
    <option value="Engineering and Design">Engineering and Design</option> 
 
    <option value="Operations and Design">Operations and Design</option> 
 
    <option value="Product management">Product management</option> 
 
    <option value="Developer relations and technical solutions">Developer relations and technical solutions</option> 
 
    <option value="Sales and account management">Sales and account management</option> 
 
    <option value="Partnerships">Partnerships</option> 
 
    <option value="Sales and operations">Sales and operations</option> 
 
    <option value="Administrative services">Administrative services</option> 
 
    <option value="Business strategy planning">Business strategy planning</option> 
 
    <option value="Finance solutions">Finance solutions</option> 
 
    <option value="Legal and government relations">Legal and government relations</option> 
 
    <option value="Marketing and communications">Marketing and communications</option> 
 
    <option value="Real estate and workplace services">Real estate and workplace services</option> 
 
    <option value="Social impact solutions">Social impact solutions</option> 
 
    <option value="Consultancy services">Consultancy services</option> 
 
    <option value="Investors and funding">Investors and funding</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <input type="submit" onClick="checkChoice()"> 
 
</form> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<br>

Сниппет в основном принимает три значения полей выбора, помещает их в массив, а затем петли через массив, чтобы увидеть, если какой-либо из значений являются одна и та же. Если они есть, мы останавливаем и возвращаем false, чтобы остановить обработку формы, и если они не найдены, мы возвращаем true, чтобы продолжить.

источник

2016-07-12 14:23:56

Я не могу реализовать его, так как моя форма содержит больше данных, а также не только эти три списка ..... –

Выпадающий список с повторяющееся значение

ответ

Смежные вопросы