2016-03-20 31 views
2

Etrafına baktım ve bunu daha önce sorulmamış gibi görmüyorum. JS: Seçili seçili olarak seçili seçenek değerini değiştirin.

ben şöyle bir seçme kutusu var:

<select onchange="change()"> 
    <option value="" selected>Option 1</option> 
    <option value="30">Option 2</option> 
    <option value="90">Option 3</option> 
</select> 

başka bir seçenek eklemek istiyorum ...

<option value="custom">Option 4</option> 

... Seçilen zaman (tıklandığında) dair bir uyarı kutusu açılacaktır kullanıcının bir sayı girmesini istemek (seçenek 30 ve 90 durumunda seçeneğin değerlerinde olduğu gibi, geçerli değerin olmaması) seçeneğin değerini değiştirmek. Gerekirse ben jQuery kullanacağız -
<script> 
function change() { 
    if(value == "custom") { 
    value = prompt("Please enter a new number:", "60"); 
    } 
} 
</script> 

Bunu yapmanın en iyi yolu düz eski javascript ile ne olduğunu bilmek istedi.

Herhangi bir fikrin var mı? Bir örnek de harika olurdu.

cevap

1

Bu koda bir bakın. Bunu Yapmaya çalıştığın şeyin olduğunu düşünüyorum:

HTML

<select id="optionvals" onclick="change()"> 
    <option value="" selected>Option 1</option> 
    <option value="30">Option 2</option> 
    <option value="90">Option 3</option> 
    <option value="custom">Option 4</option> 
</select> 

JS

function change() { 
    var oItem = document.getElementById('optionvals'); 
    var value = oItem.options[oItem.selectedIndex].value; 
    if(value == "custom") { 
    alert("you've clicked b"); 
    value = prompt("Please enter a new number:", "60"); 
    oItem.options[oItem.selectedIndex].value = value; 
    console.log(oItem.options[oItem.selectedIndex].value) 
    } 
} 

ne yapar değişim yalnızca seçilen değeri ise üzerinde istemi olduğunu seçeneklerde custom. Ardından, özel bir değer seçtikten sonra, custom seçenek öğesinin değerini, komut satırında az önce girdiğiniz değere yeniden yazacaktır. Yeni değeri, çalıştığını göstermek için atadıktan sonra kaydettim. İşte

bir keman olduğunu: Cevabınız için https://jsfiddle.net/ng7xvy05/

+0

Bu mükemmel! Çok teşekkür ederim! JS'nin hayatım boyunca anlayamadım, PHP'yi çok daha fazla yazmaktan zevk duyuyorum. JS lol – Matthew

+0

Bu betik, değer yerine Kimliğe dayalı seçeneği bulabilir. gerektiğinde birden fazla değişti mi? – Matthew

+1

Evet. OItem.options [oItem.selectedIndex] .value içinde "value" değerini "id" olarak değiştirin. –

1

onchange etkinliğiniz bunun için uygun yoldur. Bu, çoğunlukla kullanıcı arabirimi (UX) tasarım konusudur. Eğer parseFloat kullanmak gerektiğini istemi moda Bunun için:

change() { 
    var value = prompt('You\'ve chosen Other. Please enter a value', '60'); 
    if(value) { 
    value = parseFloat(value); 
    // apply it to your model 
    } else { 
    // apply NULL to your model 
    } 
} 

görüş UXD açıdan ben typeahead girişi kullanmak. Bilinen cevapları otomatik olarak arar ancak kullanıcının kendi girdilerini girmesine de izin verir. Bu standart html değildir, bu yüzden bunu kendiniz yazmanız veya jquery kullanmanız gerekir. Ancak kullanıcı arayüzü tasarım bakış açısından, emmek ister.

+0

sayesinde ben kendim isteyen bir hayranı değilim ... ve bir web sitesinin ön ucundaki birini kullanmak asla. Bu sadece çok az zaman tasarrufu sağlayan hesaplamalar yapmak için kullanıyorum küçük bir araçtır - birkaç çalışan için tasarlanmış, istemini en basit şey. Eğer çıldırmak istiyorsam, sanırım pop-up modelini oluşturabilir ve kendi girişimi oluşturabilirim. Ayrıca bu seçeneğin çok sık kullanılmasından da kuşkuluyum ... öneri için +1 veya UI/UX hakkında düşünmek. – Matthew

İlgili konular