How to link events from two scripts?

  • 0
    Hello! Thanks in advance to everyone who reads and can help!
    The crux of the matter is there is a select handler script.
    $(function() {
    	$('.select-div').hide();
    
    	$('#select-select').on('change', (function () {
    	$('.select-div').slideUp();
    	$('.select-div').removeClass('current');
    	$("." + $(this).val()).slideDown();
    	$("." + $(this).val()).addClass('current');
    }));
    });

    When selected, sets the class to the div.
    There is also a script for changing the select style.
    $('.select').each(function() {
        const _this = $(this),
            selectOption = _this.find('option'),
            selectOptionLength = selectOption.length,
            selectedOption = selectOption.filter(':selected'),
            duration = 0;
    
        _this.hide();
        _this.wrap('<div class="select"></div>');
        $('<div>', {
            class: 'my-select',
            text: _this.children('option:disabled').text()
        }).insertAfter(_this);
    
        const selectHead = _this.next('.my-select');
        $('<div>', {
            class: 'my-select__list'
        }).insertAfter(selectHead);
    
        const selectList = selectHead.next('.my-select__list');
        for (let i = 1; i < selectOptionLength; i++) {
            $('<div>', {
                class: 'my-select__item',
                html: $('<span>', {
                    text: selectOption.eq(i).text()
                })
            })
            .attr('data-value', selectOption.eq(i).val())
            .appendTo(selectList);
        }
    
        const selectItem = selectList.find('.my-select__item');
        selectList.slideUp(0);
        selectHead.on('click', function() {
            if ( !$(this).hasClass('on') ) {
                $(this).addClass('on');
                selectList.slideDown(duration);
    
                selectItem.on('click', function() {
                    let chooseItem = $(this).data('value');
    
                    $('select').val(chooseItem).attr('selected', 'selected');
                    selectHead.text( $(this).find('span').text() );
    
                    selectList.slideUp(duration);
                    selectHead.removeClass('on');
                });
    
            } else {
                $(this).removeClass('on');
                selectList.slideUp(duration);
            }
        });
    });


    <select class="select" id="select-select">
    	<option value="A">A</option>
    	<option value="B">B</option>
    	<option value="C">C</option>
    </select>
    
    <div class="select-div A">A</div>
    <div class="select-div B">B</div>
    <div class="select-div C">C</div>

    When choosing a select without a style script, the class from the first script is added, but in the case of a style, no. Tell me how you can link the event from the second script to the first.
    Once again, Thank you all!
    JavaScript Anonymous, Mar 3, 2020

  • 0 Answers
Your Answer
To place the code, please use CodePen or similar tool. Thanks you!