Блог

Главная - Вопросы по программированию - Попытка заставить выбранный атрибут работать

Попытка заставить выбранный атрибут работать

#jquery

#jquery

Вопрос:

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

Вот мой код

 <div class="content_wrapper">
    <div class="row">
        <div class="col-lg-12">
            <form action="{{ route('account.sort-orders') }}">
                <select class="sort_orders" name="sort_orders">
                    <option class="all" value="all" selected>All</option>
                    <option class="three_months" value="three_months">Last 3 months</option>
                    <option class="six_months" value="six_months">Last 6 months</option>
                    <option class="2019" value="2019">2019</option>
                </select>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function(){
        $('.sort_orders').change(function(){
            $(this).closest("form").submit();
        });

        $("select.sort_orders").change(function(){
            var selectedOpton = $(this).children("option:selected").val();
            console.log("You have selected this option - "   selectedCountry);

            if(selectedOpton == 'three_months'){
                console.log('this is three_months');
                $('.all').removeAttr('selected');
                $('.three_months').attr('selected', true);
            }
        });
    });

</script>

Комментарии:

1. Какую проблему вы ожидаете решить с помощью этого кода? Я спрашиваю, потому что смысл кода полностью избыточен. Если вы выбрали «Три месяца», то никакой другой вариант не может быть выбран, если только вы не используете множественный выбор, чего вы не делаете. Следовательно, логика removeAttr() / attr() бессмысленна — это происходит по умолчанию при использовании элемента управления HTML по умолчанию

2. Я обновил свой ответ, который теперь должен работать.

Ответ №1:

Безусловно, есть более эффективные способы сделать это. Однако, я думаю, это то, чего вы пытаетесь достичь.

 <div class="content_wrapper">
    <div class="row">
        <div class="col-lg-12">
            <form action="{{ route('account.sort-orders') }}">
                <select id="yourSlct" class="sort_orders" name="sort_orders">
                    <option class="all" value="all" selected>All</option>
                    <option id="option2" class="three_months" value="three_months">Last 3 months</option>
                    <option class="six_months" value="six_months">Last 6 months</option>
                    <option class="2019" value="2019">2019</option>
                </select>
            </form>
        </div>
    </div>
</div>

<script>

$(document).ready(function(){

    $('.sort_orders').change(function(){
        $(this).closest("form").submit();
    });

    $("select.sort_orders").change(function(){
        var selectedOpton = $(this).children("option:selected").val();
        $('#text').text(selectedOpton);

        $('#yourSlct').children().removeAttr("selected");

        if(selectedOpton == 'three_months'){
            console.log('this is three_months');
            $("select.sort_orders #option2").attr("selected", "selected");
        }
    });
});

</script>

Комментарии:

1. Я заставил свою функцию контроллера выдать атрибут selected , и хотя это сработало. Я надеюсь, что есть лучший способ сделать это с помощью jquery. Причина, по которой я подумал сделать это через мой контроллер, заключалась в том, что моя страница обновлялась.

2. @Nikki Ты уверен, что добавил все идентификаторы и т.д.? Я попробовал это в JS Fiddle, и у меня это сработало. Я отредактировал HTML и JS, возможно, попробуйте скопировать и вставить мой ответ.