Nano Hash - криптовалюты, майнинг, программирование

JavaScript — скрывать кнопки в зависимости от выбранных параметров

У меня есть два (или в некоторых местах больше) выпадающих списка (выбрать) с несколькими вариантами. Также есть кнопка для очистки всех выбранных значений в выпадающих списках. Есть один аспект этой кнопки очистки, который не работает должным образом для моих нужд.

Кнопка отображается только в том случае, если в раскрывающемся списке выбран вариант со значением, после выбора вариантов с пустым значением кнопка скрывается. После того, как я выберу какой-либо параметр в обоих раскрывающихся списках (отображается кнопка), а затем изменю значение в одном из этих раскрывающихся списков на параметр без значения (кнопка скрыта). Проблема в том, что эта кнопка скрывается после того, как один из выпадающих списков имеет пустое значение.

Мне нужно, чтобы эта кнопка была скрыта, только если во всех раскрывающихся списках есть выбранная опция с пустым значением. Этот jsfiddle иллюстрирует, что я имею в виду.

Я использую select2.js для раскрывающихся списков.

HTML:

<input type="button" class="opt-clear" value="Clear all dropdowns">
<div class="option">
    <select>
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
<div class="option">
    <select>
        <option value="">Please select</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>

Javascript:

$('select').select2();

$('.option select').change(function() {
var id=$(this).val();
if (id=="") {
    $(".opt-clear").hide();
} else {
    $(".opt-clear").show();
}
}).trigger('change');

$(".opt-clear").click(function() { $(".option select").select2("val", ""); });
javascript html jquery select
15.05.2014

Ответы:


1

Вы должны проверить val из всех списков. Если хотя бы один из них имеет значение, не скрывайте кнопку. Вы должны использовать each() и var в качестве флага.

Пытаться:

$('.option select').change(function () {
    var flag = 1;
    $(".option select").each(function (index) {
        var id = $(this).val();
        if (id != "") {
            flag = 0;
        }
    });


    if (flag) {
        $(".opt-clear").hide();
    } else {
        $(".opt-clear").show();
    }
}).trigger('change');

ДЕМО

15.05.2014

2

Используйте этот код, ваша проблема будет решена:

HTML-код:

<input type="button" id="btnChangeddValue" onclick="ddChangeValue();" style="display: none;"
        class="opt-clear" value="Clear all dropdowns">
    <div class="option">
        <select id="dd1" onchange="ddChange(this.value);">
            <option value="">Please select</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
    <div class="option">
        <select id="dd2" onchange="ddChange(this.value);">
            <option value="">Please select</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>

Js-скрипт:

function ddChange(ddValue) {
            if (ddValue != "" && ddValue != null) {
                //                $('#btnChangeddValue').css({ 'display': 'block' });
                document.getElementById('btnChangeddValue').style.display = 'block';
            }
            else {
                document.getElementById('btnChangeddValue').style.display = 'none';
            }
        }
        function ddChangeValue() {
            document.getElementById('dd1').value = "";
            document.getElementById('dd2').value = "";
            document.getElementById('btnChangeddValue').style.display = 'none';
        }

С уважением,

Hardik Patel
15.05.2014

3

привет, я бы попытался получить весь выбор со значением. если их количество больше 0, то кнопка должна отображаться. вы можете добиться этого с помощью jquery filter funstion

if ( $('.option select').filter(function(0 { return $(this).val != ''; }).length > 0){
    //show button
}
else{
    //hide button
}
15.05.2014

4

Обновлена ​​ваша скрипка.

$('.option select').change(function() {
    checkvalue();
    if(flag){
        $('input').show();
    }else{
        $('input').hide();
    }

}).trigger('change');

function checkvalue(){
    $('.option select').each(function(){
        if ($(this).val()!="") {
        flag = true;
        }else{
            flag = false;
        }
    });
}

Ваш DOM имеет несколько тегов выбора. Так что ваш код не сработал.

15.05.2014
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..