편집 기록

<select class="category">
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>

<select class="group">
    <option>A1</option>
    <option>A2</option>
    <option>A3</option>
    <option>B1</option>
    <option>B2</option>
    <option>B3</option>
    <option>C1</option>
    <option>C2</option>
    <option>C3</option>
</select>

<div class="select-wrap">
    <a>X</a>
     <ol>
        <li>A</li>
        <li>B</li>
        <li>B1</li>
    </ol>
</div>

[ class = category ] 의 select 를 선택 하여 A를 선택하면 select-wrap div 부분에 선택 값이 입력되고 category 에서 option A는 지워지며 만약 [ class = group ] 의 select 에서 B에 관련된 (B1,B2,B3) 관련된 option 값을 선택시 select-wrap div 부분에 선택 값이 + [ class = category ] 의 B 또한 select-wrap div 부분에 입력을 되고 입력된 값은 select 부분에서 지우려고 합니다. 또한 a태그를 누루면 모두 지워지며 리셋을 시키려고 합니다.

고수분님들 제발 힌트즘 부탁드립니다.

<select type="text" id="category">
    <option value="a" data-section="a">a</option>
    <option value="b" data-section="b">b</option>
    <option value="c" data-section="c">c</option>
</select>

<select type="text" id="group">
    <option value="a1" data-section="a">A1</option>
    <option value="a2" data-section="a">A2</option>
    <option value="a3" data-section="a">A3</option>
    <option value="b1" data-section="b">B1</option>
    <option value="b2" data-section="b">B2</option>
    <option value="b3" data-section="b">B3</option>
    <option value="c1" data-section="c">C1</option>
    <option value="c2" data-section="c">C2</option>
    <option value="c3" data-section="c">C3</option>
</select>

<div class="select-wrap">
     <ol>
        <li>A<a>X</a></li>
        <li>B<a>X</a></li>
        <li>B1<a>X</a></li>
    </ol>
</div>

1) [ category ] 의 select A를 선택하면 select-wrap ol li 부분으로 ( AX )값이 입력되며 선택 값은 [ category ] 에서 중복 선택이 불가능하도록 사라져야합니다.

2) [ group ] 의 select 에서 B1을 선택하면 [ category ] b또한 select-wrap ol li 부분으로 입력되며 [ category ] B + [ group ] B1 은 select 에서 사라져야합니다.

3) [ select-wrap ol li a ] 태그를 누루면 해당 li 사라지고 select 에 다시 활성화 하려합니다.

어떤 방식으로 해야할지 전혀 모르겠습니다.

제발 힌트즘 부탁드립니다.