JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<div class="tabBox">
    <ul class="tabTableNav nav">
        <li><a href="grid0001">主打商品001</a></li>
        <li><a href="grid0002">主打商品002</a></li>
        <li><a href="grid0003">主打商品003</a></li>
        <li><a href="grid0004">主打商品004</a></li>
        <li><a href="grid0005">主打商品005</a></li>
    </ul>
</div>

<select name="promot-group">
    <option value="grid0001">主打商品001</option>
    <option value="grid0002">主打商品002</option>
    <option value="grid0003">主打商品003</option>
    <option value="grid0004">主打商品004</option>
    <option value="grid0005">主打商品005</option>
    <option value="grid0006">主打商品006</option>
</select>

<button> test </button>
<br />
<div id="result"></div>

JavaScript

$("button").click(function(e) {
    
    var text = $('select[name="promot-group"] option:selected').text();
    var tid = $('select[name="promot-group"]').val();
    
    if(!$('.tabTableNav a[href="'+tid+'"]').text()){
        $("ul.tabTableNav").append('<li><a href="'+tid+'">'+text+'</a></li>');
    }
});