根据多个下拉选项显示Div

2024-05-17 • 问答

/etc/nginx/sites-available/myproject
server {
    listen 80;
    server_name my_ip_address (not domain,maybe here I should write domain name ?);

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/my/_username//myproject;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/home/my/_username/myproject.sock;
    }
}

我有2个单独的下拉菜单，如此处所示。我要这样做，以便如果他们选择main，它将显示main的div并带有一个等于他们选择的数字的文本框（即4将显示4个主要文本框供他们填写），我知道该怎么做。问题来自于sub，我希望他们为每个主选择显示一个与sub相等的文本框（即，如果main为3且sub为3，则3个主文本框中的每个文本框后面都会有3个子文本框）我可以使其显示3个或全部，但是我无法根据对主和副的选择来弄清楚如何使它准确显示我要寻找的字段。我是否只需要在Java脚本的功能中设置，如果main == x，然后在sub的功能上显示xyz？

要实现此目的，您必须：

在每次选择时使用change事件
在每个选项上利用value属性

演示：

const mainSelect = document.querySelector('select[name="main"]');
const subSelect = document.querySelector('select[name="sub"]');
const resultsDiv = document.getElementById("results");

mainSelect.addEventListener("change",event => {
  handleChange(event);
});

subSelect.addEventListener("change",event => {
  handleChange(event);
});

function handleChange(event) {
  let textboxes = "";
  let mainCount = Number(mainSelect.value);
  let subCount = Number(subSelect.value);
  
  for (let i = 0; i < mainCount; i++) {
    let t = "<input type='text' placeholder='main' /><br/>";
    
    for (let s = 0; s < subCount; s++) {
      t += "<input placeholder='sub' style='margin-left: 10px;' /><br/>"
    }
    
    textboxes += t;
  }
  
  resultsDiv.innerHTML = `<h4>Please fill these out</h4>${textboxes}`;
}

<select name="main">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<br />
<select name="sub">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div id="results"></div>

您可以在子选择中使用onchange：

<select name="sub" onchange="createSubInput(this)">

 function createSubInput (selected) {
      let mainSelectedValue = document.getElementById('main').value;

       for(let i=0; i< mainSelectedValue; i++) {
        for(let j=0; j< selected.value; j++) {
          // todo: create sub input by each main input
        }
      }
    }

根据多个下拉选项显示Div

fc1138728 回答：根据多个下拉选项显示Div

大家都在问