JAVASCRIPT: muhtemelen aşağıdaki hakkında gidiş bir daha verimli rota oluşturma/bazı kodlar temizlik ile görevli

Question

iki seçimlere bağlı olarak belirlenmesi yolu:

bir formda iki seçme kutuları vardır

. Biri Program Türü ve diğer adı Rol. 4 program türü ve 10 rol vardır. Seçtiğiniz ikiye bağlı olarak, size iki sayfa getirecektir.

Ayrıca bazı roller seçilen program türüne bağlı olarak, seçilebilir değildir bulunmaktadır. Öyleyse, örneğin, Program Türü altında "GST" seçildiyse - "Sorun Oluşturucu", "Memur" ve "Yönetici" bir rol olarak seçilemez.

Herhangi birinin, bu görevle ilgili olarak kullanabileceğim JavaScript işleviyle ilgili herhangi bir önerisi olup olmadığını merak ediyordum.

Answer 1

Çözümüme göz atın. Anahtar ifadelerini desteklememeye eğilimliyim çünkü hantallaşabilirler, bu yüzden düzenli bir ifade kullandım.

Aşağıdaki kod, program-type seçiminin değeri değiştirildiğinde her zaman bağımlılık işlevini çağırır. Daha sonra role seçme öğesinin her bir seçeneğiyle, her seçeneğin veri bağımlılık özniteliğine karşı program-type seçme öğesinin geçerli değerini denetler.

Normal ifade, özniteliğin değerlerden (virgülle ayrılmış değerlerden) veya bir yakalama değerinden (bu durumda * yaptığım) eşleşip eşleşmediğini kontrol eder - örneğin, ilk seçenek program-type için seçildi, regex karşılaştırma gibi bir şeye hesaplar:

"1".match(/\*|1/i) // true 
"2,3".match(/\*|1/i) // false 
"*".match(/\*|1/i) // true 

Eşleşmezlerse, ben hiçbiri seçeneğin ekranı kurdum - ancak isterseniz sadece bunu devre dışı bırakabilirsiniz .. Gerçekten istediğin bir şey. Normal ifadeler yeniyseniz

, ben bu yardımcı olur regexr

Umut öneriyoruz. nakledilmiş

function dependency(e){ 
 
    var roles = document.querySelectorAll('#role option') 
 
    for(var i = 0 ; i < roles.length ; i++) { 
 
    var re = new RegExp('\\*|' + e.currentTarget.value, 'i') 
 
    if(roles[i].dataset.dependency.match(re)) roles[i].style.display = 'block' 
 
    else roles[i].style.display = 'none' 
 
    } 
 
} 
 

 
document.querySelector('#program-type').addEventListener('change', function(e){ 
 
    dependency(e) 
 
})

<select id="program-type" name="program-type"> 
 
    <option value="default" disabled selected>Select Program-Type</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
</select> 
 
<select id="role" name="role"> 
 
    <option value="foo" data-dependency="*" disabled selected>Select role</option> 
 
    <option value="foo" data-dependency="1">foo</option> 
 
    <option value="bar" data-dependency="2,3">bar</option> 
 
    <option value="baz" data-dependency="*">baz</option> 
 
</select>