select 태그를 ul li로 바꾸는방법...

<ul class="wr_11" id="menu01" style="background-color: rgb(245, 246, 243); width: 30%;">
    <li value=":::::::::::선택하지 않음:::::::::::" <?php if ($write['wr_11'] == "선택하지 않음") echo "selected"; ?>>―――선택하지 않음―――</li>
    <li value="105600,354" <?php if ($write['wr_11'] == "354-15K") echo "selected"; ?>>NCB354-15K</li>
    <li value="123800,553" <?php if ($write['wr_11'] == "354-18K") echo "selected"; ?>>NCB354-18K</li>
    <li value="177100,753" <?php if ($write['wr_11'] == "354-22K") echo "selected"; ?>>NCB354-22K</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-27K") echo "selected"; ?>>NCB354-27K</li>
    <li value="285300,753" <?php if ($write['wr_11'] == "354-33K") echo "selected"; ?>>NCB354-33K</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-43K") echo "selected"; ?>>NCB354-43K</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-15L") echo "selected"; ?>>NCB354-15L</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-22L") echo "selected"; ?>>NCB354-22L</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-27L") echo "selected"; ?>>NCB354-27L</li>
    <li value="255300,753" <?php if ($write['wr_11'] == "354-33L") echo "selected"; ?>>NCB354-33L</li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var wr_11 = '<?=$wr_11?>'; // assuming $wr_11 is defined somewhere

    // Find the selected item and add a class for styling
    $('.wr_11 li').each(function () {
        if ($(this).text() === wr_11) {
            $(this).addClass('selected');
        }
    });

    // Attach a click event to each list item
    $('.wr_11 li').on('click', function () {
        wr_11 = $(this).text();

        // Remove the 'selected' class from all items and add it to the clicked item
        $('.wr_11 li').removeClass('selected');
        $(this).addClass('selected');

        // Call the selCheck function with the selected value
        selCheck(0, wr_11);
    });
});
</script>