Javascript-форум - Работа с select

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Работа с select (https://javascript.ru/forum/misc/73911-rabota-s-select.html)

Работа с select

Добрый день, подскажите как отлавливать изменение значений внутри select.

Создадим пару вкладок select:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="text"></div>
<div id="box"></div>
<button id="click">Все 100%</button>
<script type="text/javascript">
var data = ['первый', 'второй', 'третий'];

var name = "";
for (i = 0; i < data.length; i++){
     name += data[i] +  '<br>' + '<select class="selectB">'+
                                    '<option>0%</option>'+
                                    '<option>10%</option>'+
                                    '<option>20%</option>'+
                                    '<option>30%</option>'+
                                    '<option>40%</option>'+
                                    '<option>50%</option>'+
                                    '<option>60%</option>'+
                                    '<option>70%</option>'+
                                    '<option>80%</option>'+
                                    '<option>90%</option>'+
                                    '<option>100%</option>'+
                      '</select>' + '<br>'
};
$("#box").html(name);

$("#click").click(function(){
    $(".selectB").val('100%');
    if($(".selectB").val() == '100%'){
          $("#text").html('Все выполнено');
    } else{
         $("#text").html('');
    };
});
</script>

В данном примере если жмем на кнопку "Все 100%" все select заполняются на 100% и срабатывает событие.

А нужно подобное событие если вручную ткнуть каждую select и выбрать там 100%, как это можно написать, подскажите пожалуйста:-?

$(".selectB").change(function(){
		$("#text").html($(".selectB").get().every(el=> el.value == '100%')?'Все выполнено':'');
	});

Artur_Hopf,
:-?

$("select").change(function() {
     if(this.value == "100%")  ....
})

j0hnik,
рони,
Спасибо, но нужно чтоб событие срабатывало только когда они все 100%
То есть если хотя бы один из них не 100%, событие не сработало:thanks:

j0hnik,
Все работает, спасибо :thanks:

Дополнительный вопрос

Дополнительный вопрос, если я еще к каждому select добавлю кнопки и скрою их. Как сделать так чтобы при событии не равном 100% появлялась только определенная кнопка. Вот пример, но у меня появятся все кнопки :-?

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="text"></div>
<div id="box"></div>
<button id="click">Все 100%</button>
<script type="text/javascript">
var data = ['первый', 'второй', 'третий'];
 
var name = "";
for (i = 0; i < data.length; i++){
     name += data[i] +  '<br>' +'<button hidden="true" class="dutton">Комментарий</button>'+ 
                                    '<select class="selectB">'+
                                    '<option>0%</option>'+
                                    '<option>10%</option>'+
                                    '<option>20%</option>'+
                                    '<option>30%</option>'+
                                    '<option>40%</option>'+
                                    '<option>50%</option>'+
                                    '<option>60%</option>'+
                                    '<option>70%</option>'+
                                    '<option>80%</option>'+
                                    '<option>90%</option>'+
                                    '<option>100%</option>'+
                      '</select>' + '<br>'
};

$("#box").html(name);

$(".selectB").change(function() {
    if($(this).val() != '100%'){
     $('.dutton').prop('hidden', false);
    }else{
    $('.dutton').prop('hidden', true);
    };
});

 
$("#click").click(function(){
    $(".selectB").val('100%');
    if($(".selectB").val() == '100%'){
          $("#text").html('Все выполнено');
          $('.dutton').prop('hidden', true);
    } else{
         $("#text").html('');
    };
});
</script>

Artur_Hopf,

$(".selectB").change(function() {
    $(this).prev().toggle(this.value != '100%');
});

Artur_Hopf,

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="text"></div>
<div id="box"></div>
<button id="click">Все 100%</button>
<script type="text/javascript">
var data = ['первый', 'второй', 'третий'];

var name = "";
for (i = 0; i < data.length; i++){
     name += data[i] +  '<br>' +'<button hidden="true" class="dutton">Комментарий</button>'+
                                    '<select class="selectB">'+
                                    '<option>0%</option>'+
                                    '<option>10%</option>'+
                                    '<option>20%</option>'+
                                    '<option>30%</option>'+
                                    '<option>40%</option>'+
                                    '<option>50%</option>'+
                                    '<option>60%</option>'+
                                    '<option>70%</option>'+
                                    '<option>80%</option>'+
                                    '<option>90%</option>'+
                                    '<option>100%</option>'+
                      '</select>' + '<br>'
};

$("#box").html(name);

$(".selectB").change(function() {
    $(this).prev().toggle(this.value != '100%' && +$("#text").html(''));
});


$("#click").click(function(){
    $(".selectB").val('100%').change();
    $("#text").html('Все выполнено');
});
</script>

рони,
Спасибо большое :yes: