Question

我有两个家庭关系不同的下拉菜单。选中后，它们会填充在下拉菜单下方的某些文本行中。我想延迟文本的填充，直到选择了两个下拉菜单。

function functionOne() {

  var e = document.getElementById("dropdown_1");
  var strUser = e.options[e.selectedIndex].value;
  document.getElementById('first').textContent = strUser + (strUser ? "'s" : "");
  document.getElementById('fourth').textContent = strUser;
}
functionOne()

document.getElementById("dropdown_1").onchange = functionOne;

function functionTwo() {

  var e = document.getElementById("dropdown_2");
  var strUser = e.options[e.selectedIndex].value;
  var strUser2 = e.options[e.selectedIndex].value;
  document.getElementById('second').textContent = strUser;
  document.getElementById('third').textContent = strUser2 + (strUser2 ? "'s" : "");
}
functionTwo()

document.getElementById("dropdown_2").onchange = functionTwo;

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

My
<select class="text_select" id="dropdown_1" name="dropdown_1">
  <option value="">- Select -</option>
  <option value="Father">Father's</option>
  <option value="Mother">Mother's</option>
  <option value="Sister">Sister's</option>
  <option value="Brother">Brother's</option>
  <option value="Husband">Husband's</option>
  <option value="Wife">Wife's</option>
  <option value="Son">Son's</option>
  <option value="Daughter">Daughter's</option>
  <option value="Grandfather">Grandfather's</option>
  <option value="Grandmother">Grandmother's</option>
  <option value="Aunt">Aunt's</option>
  <option value="Uncle">Uncle's</option>
  <option value="Cousin">Cousin's</option>
  <option value="Father-in-Law">Father-in-Law's</option>
  <option value="Mother-in-Law">Mother-in-Law's</option>
  <option value="Sister-in-Law">Sister-in-Law's</option>
  <option value="Brother-in-Law">Brother-in-Law's</option>
  <option value="Niece">Niece's</option>
  <option value="Nephew">Nephew's</option>
  <option value="Grandson">Grandson's</option>
  <option value="Granddaughter">Granddaughter's</option>
  <option value="Great-Aunt">Great-Aunt's</option>
  <option value="Great-Uncle">Great-Uncle's</option>

</select>

<select class="text_select" id="dropdown_2" name="dropdown_2">
  <option value="">- Select -</option>
  <option value="Father">Father</option>
  <option value="Mother">Mother</option>
  <option value="Sister">Sister</option>
  <option value="Brother">Brother</option>
  <option value="Husband">Husband</option>
  <option value="Wife">Wife</option>
  <option value="Son">Son</option>
  <option value="Daughter">Daughter</option>
  <option value="Grandfather">Grandfather</option>
  <option value="Grandmother">Grandmother</option>
  <option value="Aunt">Aunt</option>
  <option value="Uncle">Uncle</option>
  <option value="Cousin">Cousin</option>
  <option value="Father-in-Law">Father-in-Law</option>
  <option value="Mother-in-Law">Mother-in-Law</option>
  <option value="Sister-in-Law">Sister-in-Law</option>
  <option value="Brother-in-Law">Brother-in-Law</option>
  <option value="Niece">Niece</option>
  <option value="Nephew">Nephew</option>
  <option value="Grandson">Grandson</option>
  <option value="Granddaughter">Granddaughter</option>
  <option value="Great-Aunt">Great-Aunt</option>
  <option value="Great-Uncle">Great-Uncle</option>
</select>

<br /><br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Answer 1

请预先选择每个[0, 1, 2, -1, 4, 5, -1, 7, 8, 9]，如果select中的一个是selectedIndex，请立即返回，以确保两者都必须有0以外的selectedIndex继续填充其他元素。另外，您现在可以将两个侦听器功能合并为一个，因为它们现在可以做完全相同的事情：

var e1 = document.getElementById("dropdown_1");
var e2 = document.getElementById("dropdown_2");

function populate() {
  if (e1.selectedIndex === 0 || e2.selectedIndex === 0) return;

  var strUser1 = e1.options[e1.selectedIndex].value;
  document.getElementById('first').textContent = strUser1 + "'s'";
  document.getElementById('fourth').textContent = strUser1;

  var strUser2 = e2.options[e2.selectedIndex].value;
  document.getElementById('second').textContent = strUser2;
  document.getElementById('third').textContent = strUser2 + "'s'";
}

document.getElementById("dropdown_1").onchange = populate;
document.getElementById("dropdown_2").onchange = populate;

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

Answer 2

在函数外部声明strUser和strUser2变量。在这种情况下，两个函数都可以访问这些变量。

还创建一个函数，如果两个变量中都有值，则会调用该函数

var strUser = '',
  strUser2 = '';

function functionOne() {

  var e = document.getElementById("dropdown_1");
  strUser = e.options[e.selectedIndex].value;
  if (strUser !== '' && strUser2 !== '') {
    populateFields()

  }
}
functionOne()

document.getElementById("dropdown_1").onchange = functionOne;

function functionTwo() {

  var e = document.getElementById("dropdown_2");
  strUser2 = e.options[e.selectedIndex].value;
  if (strUser !== '' && strUser2 !== '') {
    populateFields()

  }
}
functionTwo()

document.getElementById("dropdown_2").onchange = functionTwo;
// a new function which will be triggered if the 
//variables value is not empty string
function populateFields() {

  document.getElementById('first').textContent = strUser + (strUser ? "'s" : "");
  document.getElementById('fourth').textContent = strUser;

  document.getElementById('second').textContent = strUser;
  document.getElementById('third').textContent = strUser2 + (strUser2 ? "'s" : "");


}

span#first,
span#second,
span#third,
span#fourth {
  min-width: 40px;
  display: inline-block;
  border-bottom: solid 1px;
  height: 18px;
  vertical-align: bottom;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My
<select class="text_select" id="dropdown_1" name="dropdown_1">
  <option value="">- Select -</option>
  <option value="Father">Father's</option>
  <option value="Mother">Mother's</option>
  <option value="Sister">Sister's</option>
  <option value="Brother">Brother's</option>
  <option value="Husband">Husband's</option>
  <option value="Wife">Wife's</option>
  <option value="Son">Son's</option>
  <option value="Daughter">Daughter's</option>
  <option value="Grandfather">Grandfather's</option>
  <option value="Grandmother">Grandmother's</option>
  <option value="Aunt">Aunt's</option>
  <option value="Uncle">Uncle's</option>
  <option value="Cousin">Cousin's</option>
  <option value="Father-in-Law">Father-in-Law's</option>
  <option value="Mother-in-Law">Mother-in-Law's</option>
  <option value="Sister-in-Law">Sister-in-Law's</option>
  <option value="Brother-in-Law">Brother-in-Law's</option>
  <option value="Niece">Niece's</option>
  <option value="Nephew">Nephew's</option>
  <option value="Grandson">Grandson's</option>
  <option value="Granddaughter">Granddaughter's</option>
  <option value="Great-Aunt">Great-Aunt's</option>
  <option value="Great-Uncle">Great-Uncle's</option>

</select>

<select class="text_select" id="dropdown_2" name="dropdown_2">
  <option value="">- Select -</option>
  <option value="Father">Father</option>
  <option value="Mother">Mother</option>
  <option value="Sister">Sister</option>
  <option value="Brother">Brother</option>
  <option value="Husband">Husband</option>
  <option value="Wife">Wife</option>
  <option value="Son">Son</option>
  <option value="Daughter">Daughter</option>
  <option value="Grandfather">Grandfather</option>
  <option value="Grandmother">Grandmother</option>
  <option value="Aunt">Aunt</option>
  <option value="Uncle">Uncle</option>
  <option value="Cousin">Cousin</option>
  <option value="Father-in-Law">Father-in-Law</option>
  <option value="Mother-in-Law">Mother-in-Law</option>
  <option value="Sister-in-Law">Sister-in-Law</option>
  <option value="Brother-in-Law">Brother-in-Law</option>
  <option value="Niece">Niece</option>
  <option value="Nephew">Nephew</option>
  <option value="Grandson">Grandson</option>
  <option value="Granddaughter">Granddaughter</option>
  <option value="Great-Aunt">Great-Aunt</option>
  <option value="Great-Uncle">Great-Uncle</option>
</select>

<br /><br /><br />
<label class="row_1">My <span id="first"></span> <span id="second"></span></label>
<br />
<label class="row_2">My <span id="third"></span> <span id="fourth"></span></label>

Answer 3

这样做吧。

function functionOne(strUser){
  document.getElementById('first').textContent = strUser+(strUser ? "'s" : "");
  document.getElementById('fourth').textContent = strUser;
}



function functionTwo(strUser, strUser2){
  document.getElementById('second').textContent = strUser;
  document.getElementById('third').textContent = strUser2+(strUser2 ? "'s" : "");
}

var drp1 = document.getElementById("dropdown_1");
var drp2 = document.getElementById("dropdown_2");

function checker(){
    var strUser = drp1.options[drp1.selectedIndex].value;
      var strUser2 = drp2.options[drp2.selectedIndex].value;
    console.log(strUser, strUser2);
    if(strUser && strUser2){
        functionOne(strUser);
      functionTwo(strUser, strUser2);
    }
}

document.getElementById("dropdown_1").onchange = checker;
document.getElementById("dropdown_2").onchange = checker;

您的html和CSS保持不变。

我所做的是添加 checker 函数，并重命名了一些更合适的变量名称。

每次更改下拉菜单时，都会运行

功能检查器。它会为每个下拉列表选择一个选项，检查它们是否都有价值并运行 functionOne 和 functionTwo 。

希望这会有所帮助。

延迟填充字段，直到选择了两个下拉菜单

3 个答案: