css 彩色下拉菜单在html中不起作用

mutmk8jj 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(152)

这是我的代码，如果复选框被选中并且值为0，我想用红色突出显示下拉框的边框，如果值不为0并且复选框被选中，则显示绿色，如果复选框未被选中，则显示灰色。
它给了我错误，但我不明白为什么。
在js脚本中，我尝试在第一个if之外插入另一个else，但是当我这样做时，代码不工作;如果我不插入，代码工作正常，但是当我取消选中复选框时，红色/绿色不会消失

setInterval(() => {
          document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
            const select = document.querySelector(`#punteggio${index+1}`);
            if (checkbox.checked) {
              if (select.value === '0') {
                select.style.borderColor = 'red';
                select.style.borderWidth = '2px';
              } 
            }
          });
        }, 100);

[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 1px solid gray; font-size: 16px;}
            section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
            
            
            label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
            label {font-weight: bold; min-width: 150px; display: inline-block;}

            input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
        
            button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
            
            #checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}

<ol id = "ordered">
          <li>
            <select id="punteggio1" >
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
          </li>
          <hr>
          <li>
            <select id="punteggio2">
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
          </li>
          <hr>
          <li>
            <select id="punteggio3">
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
          </li>
          <hr>

        </ol>

css

来源：https://stackoverflow.com/questions/75345108/coloured-drop-down-menu-not-working-in-html

2条答案

按热度按时间

piwo6bdm1#

setInterval(() => {
    document.querySelectorAll('#ordered li').forEach((li) => {
        const select = li.querySelector('select')
        const checkbox = li.querySelector('input[type=checkbox]')
        if(checkbox.checked) {
            if(select.value == '0') {
                select.style.borderColor = 'red';
            }
            else {
                select.style.borderColor = 'green';
            }
        }
        else {
            select.style.borderColor = 'grey';
        }   
    });
}, 100);

赞(0）回复(0）举报 2023-02-06

qjp7pelc2#

setInterval(() => {
          document.querySelectorAll('input[type="checkbox"]').forEach((checkbox, index) => {
            const select = document.querySelector(`#punteggio${index+1}`);
            if (checkbox.checked) {
              if (select.value === '0') {
                select.style.borderColor = 'red';
                select.style.borderWidth = '2px';
              }else{
                select.style.borderColor = 'green';
                select.style.borderWidth = '2px';
              }
            } 
          });
        }, 100);

[id^="punteggio"] {padding: 8px 10px; border-radius: 5px; border: 2px solid gray; font-size: 16px;}
            section {margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
            
            
            label, input {display:block; margin-bottom: 10px; font-size: 1.2em;}
            label {font-weight: bold; min-width: 150px; display: inline-block;}

            input[type="text"], input[type="checkbox"]{padding: 10px;border-radius: 5px; border: 1px solid lightgray; width: 100%;}
        
            button[type="button"] {width: 100%;padding: 10px; background-color: lightblue; border-radius: 5px; color: #000;cursor: pointer;margin-top: 20px;}
            
            #checkbox1 {width: 20px; height: 20px;border-radius: 15px; margin-right: 10px;}

<ol id = "ordered">
          <li>
            <select id="punteggio1" >
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Primo esercizio
          </li>
          <hr>
          <li>
            <select id="punteggio2">
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Secondo esercizio" id = "checkbox1" style="display: inline-block;">Secondo esercizio</input>
          </li>
          <hr>
          <li>
            <select id="punteggio3">
              <option value="0">0</option>
              <option value="0.5">0.5</option>
              <option value="1">1</option>
              <option value="1.5">1.5</option>
              <option value="2">2</option>
              <option value="2.5">2.5</option>
              <option value="3">3</option>
              <option value="3.5">3.5</option>
              <option value="4">4</option>
              <option value="4.5">4.5</option>
              <option value="5">5</option>
              <option value="5.5">5.5</option>
              <option value="6">6</option>
              <option value="6.5">6.5</option>
              <option value="7">7</option>
              <option value="7.5">7.5</option>
              <option value="8">8</option>
              <option value="8.5">8.5</option>
              <option value="9">9</option>
              <option value="9.5">9.5</option>
              <option value="10">10</option>
            </select>
            <input type="checkbox" name="item" value="Terzo esercizio" id = "checkbox1" style="display: inline-block;">Terzo Esercizio</input>
          </li>
          <hr>

        </ol>

赞(0）回复(0）举报 2023-02-06

我来回答

css 彩色下拉菜单在html中不起作用

2条答案

相关问题

热门标签

最新问答