Javascript를 사용하여 여러 데이터 목록의 값 비교

게 리트 309

우선, 나는 이것이 어리석은 질문이라면 죄송합니다. 모든 국가를 포함하는 데이터 목록을 만들었습니다. 이제 사용자가 다른 목록에서 동일한 국가를 선택했는지 Javascript에서 확인하고 싶습니다.

어떻게하나요?

이것이 내가 지금까지 가지고있는 것입니다.

var inputs1 = document.getElementsByName('country1','country2','country3','country4'),
    country1, country2, country3, country4;

for (var i = 0; i < inputs1.length; i++) {
  var el = inputs1[i];
  el.addEventListener('change', function() {
    compareLists(this.value);
  })
}



function compareLists(country1,country2,country3,country4) {
  if (country1 == country2) {
    document.getElementById("ebene2").classList.add('showing');
    document.getElementById("ebene3").classList.remove('showing');
}else  {
    document.getElementById("ebene3").classList.add('showing');
    document.getElementById("ebene2").classList.remove('showing');
}}
<div>
    <h3>In welchem Staat sind die folgenden Orte? </h3>

     Sitz / gewöhnlicher Aufenthalt des Beförderers: 
     <form>
      <input type="search" name ="country1" list="country">
      <datalist id="country">
      </datalist>
  </form>
        <br>
     Sitz / gewöhnlicher Aufenthalt des Absenders 
    <form>
      <input type="search" name ="country2" list="country">
      <datalist id="country">
        
      </datalist>
    </form>
        <br>
     Übernahmeort der Güter 
    <form>
      <input type="search" name ="country3"list="country">
      <datalist id="country">
        
      </datalist>
    </form>
        <br>
     Ablieferungsort der Güter
     <form>
      <input type="search" name ="country4" list="country">
      <datalist id="country">
        
      
      </datalist>
    </form>
        <br>
</div>

어떤 도움을 주셔서 대단히 감사합니다. 미리 감사드립니다!

사용자 120242

id 속성은 전체 문서 내에서 고유해야합니다. 각 입력에 대해 다른 국가 데이터 목록을 사용하려면 각 데이터 목록에 다른 ID를 사용해야합니다.

getElementsByName은 단일 이름으로 검색합니다. 여러 인수를 사용하지 않습니다.
모두 같은 이름을 주거나 클래스를 사용할 수 있습니다.

var inputs1 = ['country1', 'country2', 'country3', 'country4'].map(c => document.getElementsByName(c)[0]),
  country1, country2, country3, country4;

for (var i = 0; i < inputs1.length; i++) {
  var el = inputs1[i];
  el.addEventListener('change', function() {
    compareLists(this.value);
  })
}

function compareLists() {
  var map = {};
  inputs1.forEach((i, idx) => {
    i.value && ((map[i.value]?.push(idx)) || (map[i.value] = [idx]));
  });
  // use an object map to collect duplicates
 
  // filter out only dupe lists > 1 in length
  map = Object.entries(map).filter(([, x]) => x.length > 1);
  console.log(map);

  // assign a different color border for each set of duped value inputs
  var colors = ['blue', 'green', 'red', 'yellow'];
  inputs1.forEach(input => input.style.border = '');
  map.forEach(([, list]) => {
    var color = colors.pop();
    list.forEach(x => inputs1[x].style.border = `1px solid blue`);
  });

  /*  if (country1 == country2) {
      document.getElementById("ebene2").classList.add('showing');
      document.getElementById("ebene3").classList.remove('showing');
    } else {
      document.getElementById("ebene3").classList.add('showing');
      document.getElementById("ebene2").classList.remove('showing');
    }*/
}
.showing {
  border: 1px solid blue
}
<datalist id="country">
          <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
      </datalist>

<div>
  <h3>In welchem Staat sind die folgenden Orte? </h3>

  Sitz / gewöhnlicher Aufenthalt des Beförderers:
  <form>
    <input type="search" name="country1" list="country">

  </form>
  <br> Sitz / gewöhnlicher Aufenthalt des Absenders
  <form>
    <input type="search" name="country2" list="country">
  </form>
  <br> Übernahmeort der Güter
  <form>
    <input type="search" name="country3" list="country">
  </form>
  <br> Ablieferungsort der Güter
  <form>
    <input type="search" name="country4" list="country">
  </form>
  <br>
</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Pandas를 사용하여 두 데이터 프레임의 열 값 비교

분류에서Dev

간단한 Odata 필터를 사용하여 목록의 값을 어떻게 비교합니까?

분류에서Dev

C #의 Linq를 사용하여 다른 목록의 값을 비교하여 목록을 필터링하는 방법은 무엇입니까?

분류에서Dev

ARRAYFORMULA를 사용하여 AND를 사용하여 여러 값 비교

분류에서Dev

데이터 프레임의 값을 비교하고이를 사용하여 다른 속성 계산

분류에서Dev

여러 변수를 데이터베이스 값과 비교

분류에서Dev

비교기를 사용하여 여러 필드의 값에 기반하여 객체를 비교

분류에서Dev

두 데이터 프레임의 열을 비교하고 Pandas를 사용하여 다른 열의 값 반환

분류에서Dev

사용자 정의 비교 함수를 사용하여 여러 열로 Pandas 데이터 프레임 정렬

분류에서Dev

R을 사용하여 부분 일치를 위해 행 값을 데이터 프레임의 열과 비교

분류에서Dev

데이터 목록을 사용하여 데이터를 비교하고 반환하는 방법

분류에서Dev

쿼리를 사용하여 여러 값 사이의 데이터 수 계산

분류에서Dev

JavaScript를 사용하여 데이터 목록 옵션 값의 선택된 값 가져 오기

분류에서Dev

동일한 테이블의 두 열 사이에서 여러 값을 비교하여 데이터를 선택하십시오.

분류에서Dev

값 목록을 사용하여 한 사전의 키를 다른 사전과 비교

분류에서Dev

Python 목록의 키 값을 여러 사전과 비교

분류에서Dev

교리를 사용하여 Symfony2의 데이터베이스 테이블에서 값 목록을 얻는 방법은 무엇입니까?

분류에서Dev

PHP를 사용하여 테이블의 다른 행에있는 셀 값 비교

분류에서Dev

단일 행의 데이터를 여러 행과 비교

분류에서Dev

세 개의 critria를 사용하여 데이터 목록을 비교하고 일치하는 것으로 찾은 다음 해당 변수의 4 열을 합하고 중복 값을 삭제하십시오.

분류에서Dev

세 개의 critria를 사용하여 데이터 목록을 비교하고 일치하는 것으로 찾은 다음 해당 변수의 4 열을 합하고 중복 값을 삭제하십시오.

분류에서Dev

찾기를 사용하여 데이터베이스의 파일 목록을 비교하여 누락 된 파일 찾기

분류에서Dev

찾기를 사용하여 데이터베이스의 파일 목록을 비교하여 누락 된 파일 찾기

분류에서Dev

pySpark를 사용하여 두 개의 큰 데이터 프레임 비교

분류에서Dev

Python 스크립트를 사용하여 MongoDB와 MySQL 간의 데이터 비교

분류에서Dev

정수 목록을 비교하고 결과 LinqtoSQL의 차이를 사용하여 데이터베이스의 행을 추가 / 제거합니다.

분류에서Dev

루프를 사용하여 2 개의 연결 목록 비교

분류에서Dev

루프를 사용하여 2 개의 연결 목록 비교

분류에서Dev

분산 한계를 사용하여 두 배열의 값 비교

Related 관련 기사

  1. 1

    Pandas를 사용하여 두 데이터 프레임의 열 값 비교

  2. 2

    간단한 Odata 필터를 사용하여 목록의 값을 어떻게 비교합니까?

  3. 3

    C #의 Linq를 사용하여 다른 목록의 값을 비교하여 목록을 필터링하는 방법은 무엇입니까?

  4. 4

    ARRAYFORMULA를 사용하여 AND를 사용하여 여러 값 비교

  5. 5

    데이터 프레임의 값을 비교하고이를 사용하여 다른 속성 계산

  6. 6

    여러 변수를 데이터베이스 값과 비교

  7. 7

    비교기를 사용하여 여러 필드의 값에 기반하여 객체를 비교

  8. 8

    두 데이터 프레임의 열을 비교하고 Pandas를 사용하여 다른 열의 값 반환

  9. 9

    사용자 정의 비교 함수를 사용하여 여러 열로 Pandas 데이터 프레임 정렬

  10. 10

    R을 사용하여 부분 일치를 위해 행 값을 데이터 프레임의 열과 비교

  11. 11

    데이터 목록을 사용하여 데이터를 비교하고 반환하는 방법

  12. 12

    쿼리를 사용하여 여러 값 사이의 데이터 수 계산

  13. 13

    JavaScript를 사용하여 데이터 목록 옵션 값의 선택된 값 가져 오기

  14. 14

    동일한 테이블의 두 열 사이에서 여러 값을 비교하여 데이터를 선택하십시오.

  15. 15

    값 목록을 사용하여 한 사전의 키를 다른 사전과 비교

  16. 16

    Python 목록의 키 값을 여러 사전과 비교

  17. 17

    교리를 사용하여 Symfony2의 데이터베이스 테이블에서 값 목록을 얻는 방법은 무엇입니까?

  18. 18

    PHP를 사용하여 테이블의 다른 행에있는 셀 값 비교

  19. 19

    단일 행의 데이터를 여러 행과 비교

  20. 20

    세 개의 critria를 사용하여 데이터 목록을 비교하고 일치하는 것으로 찾은 다음 해당 변수의 4 열을 합하고 중복 값을 삭제하십시오.

  21. 21

    세 개의 critria를 사용하여 데이터 목록을 비교하고 일치하는 것으로 찾은 다음 해당 변수의 4 열을 합하고 중복 값을 삭제하십시오.

  22. 22

    찾기를 사용하여 데이터베이스의 파일 목록을 비교하여 누락 된 파일 찾기

  23. 23

    찾기를 사용하여 데이터베이스의 파일 목록을 비교하여 누락 된 파일 찾기

  24. 24

    pySpark를 사용하여 두 개의 큰 데이터 프레임 비교

  25. 25

    Python 스크립트를 사용하여 MongoDB와 MySQL 간의 데이터 비교

  26. 26

    정수 목록을 비교하고 결과 LinqtoSQL의 차이를 사용하여 데이터베이스의 행을 추가 / 제거합니다.

  27. 27

    루프를 사용하여 2 개의 연결 목록 비교

  28. 28

    루프를 사용하여 2 개의 연결 목록 비교

  29. 29

    분산 한계를 사용하여 두 배열의 값 비교

뜨겁다태그

보관