li 서울을 선택하면 동시에 option 서울이 선택되게 하려면 어떻게 해야 하나요?

li 서울을 선택하면 동시에 option 서울이 선택되게 하려면 어떻게 해야 하나요?

QA

li 서울을 선택하면 동시에 option 서울이 선택되게 하려면 어떻게 해야 하나요?

본문

li 서울을 선택하면

동시에 option 서울이 선택되게 하려면 어떻게 해야 하나요?

감사합니다. 

 

<ul>

<li id="aaa">서울</li>

<li id="bbb">인천</li>

<li id="ccc">경기</li>

</ul>

 

<select>

<option id="aaa">서울</option> 

<option id="bbb">서울</option> 

<option id="ccc">서울</option> 

</select> 

이 질문에 댓글 쓰기 :

답변 6

코드 한번 만들어 보았습니다.

링크 걸고 원페이지로 다시 넘어오면 선택된 value 값으로 표기됩니다.

 


<li onclick="sessionStorage.you='네이버'"><a href="https://www.naver.com/">네이버</a></li>
<li onclick="sessionStorage.you='다음'"><a href="https://www.daum.net/">다음</a></li>
<li onclick="sessionStorage.you='구글'"><a href="https://www.google.co.kr/">구글</a></li>
<br>
<select id=my>
    <option style=display:none>선택하세요</option>
    <option>네이버</option>
    <option>다음</option>
    <option>구글</option>
</select>
<script>
if (sessionStorage.you) my.value = sessionStorage.you;
</script>

 

sessionStorage.clear() 는 세션 스토리지를 삭제할 때 사용하는 메소드이니 알아서 원하는 부분에...

세션스토리지는 내가 윈도우를 끄면 자동삭제 되지만

윈도우를 켜 놓은 상태에서라면 링크가 일어나도 계속 데이터를 달고 다닙니다.

비타주리 님, 답변 감사합니다
주신 소스 공부했습니다.

군구가 선택이 안됩니다.


<li class="dev_tab" onclick="sessionStorage.you='서울'"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=서울">서울</a></li>
<li class="dev_tab" onclick="sessionStorage.you='경기'"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=경기">경기</a></li>
<li class="dev_tab" onclick="sessionStorage.you='인천'"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=인천">인천</a></li>
......


          <div class="search_box">
            <select name="stx" id="wr_7" required onchange="categoryChange(this)">
              <option value="">시/도 선택</option>
              <option value="서울">서울</option>
              <option value="경기">경기</option>
              <option value="인천">인천</option>
              ......
            </select>
          </div>
         
      <div class="search_box">
            <select name="stx" id="wr_8" required>
              <option>군/구 선택</option>
            </select>
          </div>

<script>
if (sessionStorage.you) wr_7.value = sessionStorage.you;
if (sessionStorage.you) wr_8.value = sessionStorage.you;
</script>



<script>

function categoryChange(e) {
  const state = document.getElementById("wr_8");

  const gangwon = ["강릉시","동해시","삼척시","속초시","원주시","춘천시","태백시","고성군","양구군","양양군","영월군","인제군","정선군","철원군","평창군","홍천군","화천군","횡성군"];
  const gyeonggi = ["고양시","과천시","광명시","광주시","구리시","군포시","김포시","남양주시","동두천시","부천시","성남시","수원시","시흥시","안산시","안성시","안양시","양주시","오산시","용인시","의왕시","의정부시","이천시","파주시","평택시","포천시","하남시","화성시","가평군","양평군","여주군","연천군"];
  const gyeongsangnam = ["거제시", "김해시", "마산시", "밀양시", "사천시", "양산시", "진주시", "진해시", "창원시", "통영시", "거창군", "고성군", "남해군", "산청군", "의령군", "창녕군", "하동군", "함안군", "함양군", "합천군"];
  const gyeongsangbuk = ["경산시","경주시","구미시","김천시","문경시","상주시","안동시","영주시","영천시","포항시","고령군","군위군","봉화군","성주군","영덕군","영양군","예천군","울릉군","울진군","의성군","청도군","청송군","칠곡군"];
  const gwangju = ["광산구", "남구", "동구", "북구", "서구"];
  const daegu = ["남구", "달서구", "동구", "북구", "서구", "수성구", "중구", "달성군"];
  const daejeon = ["대덕구", "동구", "서구", "유성구", "중구"];
  const busan = ["강서구","금정구","남구","동구","동래구","부산진구","북구","사상구","사하구","서구","수영구","연제구","영도구","중구","해운대구","기장군"];
  const seoul = ["강남구","강동구","강북구","강서구","관악구","광진구","구로구","금천구","노원구","도봉구","동대문구","동작구","마포구","서대문구","서초구","성동구","성북구","송파구","양천구","영등포구","용산구","은평구","종로구","중구","중랑구"];
  const ulsan = ["남구","동구","북구","중구","울주군"];
  const incheon = ["계양구","남구","남동구","동구","부평구","서구","연수구","중구","강화군","옹진군"];
  const jeonnam = ["광양시","나주시","목포시","순천시","여수시","강진군","고흥군","곡성군","구례군","담양군","무안군","보성군","신안군","영광군","영암군","완도군","장성군","장흥군","진도군","함평군","해남군","화순군"];
  const jeonbuk = ["군산시", "김제시", "남원시", "익산시", "전주시", "정읍시", "고창군", "무주군", "부안군", "순창군", "완주군", "임실군", "장수군", "진안군"];
  const jeju = ["서귀포시","제주시","남제주군","북제주군"];
  const chungbuk = ["제천시","청주시","충주시","괴산군","단양군","보은군","영동군","옥천군","음성군","증평군","진천군","청원군"];
 

  if (e.value == "강원") {
    add = gangwon;
  } else if (e.value == "경기") {
    add = gyeonggi;
  } else if (e.value == "경남") {
    add = gyeongsangnam;
  } else if (e.value == "경북") {
    add = gyeongsangbuk;
  } else if (e.value == "광주") {
    add = gwangju;
  } else if (e.value == "대구") {
    add = daegu;
  } else if (e.value == "대전") {
    add = daejeon;
  } else if (e.value == "부산") {
    add = busan;
  } else if (e.value == "서울") {
    add = seoul;
  } else if (e.value == "울산") {
    add = ulsan;
  } else if (e.value == "인천") {
    add = incheon;
  } else if (e.value == "전남") {
    add = jeonnam;
  } else if (e.value == "전북") {
    add = jeonbuk;
  } else if (e.value == "제주") {
    add = jeju;
  } else if (e.value == "충남") {
    add = chungnam;
  } else if (e.value == "충북") {
    add = chungbuk;
  }

  state.options.length = 1;
  // 군/구 갯수;

for (property in add) {
let opt = document.createElement("option");
opt.value = add[property];
opt.innerHTML = add[property];
state.appendChild(opt);
}
}
</script>

셀렉트에 아이디를 하나 주고

 

<select id=my>

 

<li onclick=my.value=innerText>서울</li>

 

그런데 같은 아이디가 두개 있으면 안되고 li 의 글자는 option 의 글자 중 하나여야 합니다.

 

지금 보면 같은 아이디를 두개씩 사용하셨는데 li 외 option 에 아이디는 모두 필요없고 셀렉트에만 아이디를 주세요.

 

물론 이걸로 여분필드로 저장은 되지만 글 수정시 이전에 선택한 글자를 다시 부르려면 용을 좀 써야 합니다.

가장 쉬운 하드코딩은 아래와 같습니다.

결과물 확인 후 input 를 나중에 hidden 처리하면 되구요.

 

<input id=wr_1>
<span style=cursor:pointer onclick=wr_1.value=innerText>서울</span>
<span style=cursor:pointer onclick=wr_1.value=innerText>대전</span>
<span style=cursor:pointer onclick=wr_1.value=innerText>대구</span>
<span style=cursor:pointer onclick=wr_1.value=innerText>부산</span>
<span style=cursor:pointer onclick=wr_1.value=innerText>찍고</span>

 

----------

 

아래는 제가 주로 사용하는 루프문 코딩입니다. id 대신 클래스를 루프문으로 돌려도 됩니다.

 

<input id=wr_1>
<span id=span_1 style=cursor:pointer>서울</span>
<span id=span_2 style=cursor:pointer>대전</span>
<span id=span_3 style=cursor:pointer>대구</span>
<span id=span_4 style=cursor:pointer>부산</span>
<span id=span_5 style=cursor:pointer>찍고</span>

<script>
for (i = 1; i <= 5; i++) {
    this["span_" + i].onclick = function() {
        wr_1.value = this.innerText;
    }
}
</script>

비타주리 님, 답변 감사합니다.
아래와 같이 했는데 검색 후 "전국"으로 도로 돌아옵니다.
제자리에 있으려면 어떻게 해야 하나요?
감사합니다


<div class="localWrap">

    <ul class="listLocal">
  <li class="dev_tab"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin">전국</a></li>
  <li class="dev_tab" onclick=wr_7.value="서울"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=서울">서울</a></li>
  <li class="dev_tab" onclick=wr_7.value="경기"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=경기">경기</a></li>
  <li class="dev_tab" onclick=wr_7.value="인천"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=gooin&sca=&sfl=wr_7&stx=인천">인천</a></li>
.....


   
          <div class="search_box">
            <select name="stx" id="wr_7" required onchange="categoryChange(this)">
              <option value>시/도 선택</option>
              <option value="강원">강원</option>
              <option value="경기">경기</option>
              <option value="경남">경남</option>
              <option value="경북">경북</option>
              <option value="광주">광주</option>
              <option value="대구">대구</option>
              <option value="대전">대전</option>
              <option value="부산">부산</option>
              <option value="서울">서울</option>
              <option value="울산">울산</option>
              <option value="인천">인천</option>
              <option value="전남">전남</option>
              <option value="전북">전북</option>
              <option value="제주">제주</option>
              <option value="충남">충남</option>
              <option value="충북">충북</option>
            </select>
          </div>

현재의 value 값을 계속 유지시키면서 페이지 이동시에도 그 값을 갖고 있으려면 자바스크립트에서 로컬스토리지나 세션스토리지에 담아서 링크페이지를 돌아다녀야겠죠.
알고나면 별 것 아닌데 첫 깨달음이 참 어려워요.

네, 현재창입니다.

 

애초에 질문보다 더 난이도가 높은 질문이네요.

이런 식으로 답변채택 안해주시고 꼬꼬무 질문을 하시는 건 좀...

이 코드에서 수정을 해 드리지는 못하구요.

2차 셀롁트 코드는 이렇게 짜면 원하는 걸 얻기가 어렵다는 말씀만 드리겠습니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 24
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT