Question

我有一个带状态＆＃34;状态＆＃34;选择4个可能的下拉列表＆＃34; carrier＆＃34;根据所选的状态选择下拉菜单（用php填充）。我的＃34;显示＆＃34;按钮触发一个网址并附加字符串＆＃34;？id =＆＃34;以及＆＃34;＆＃34;运营商＆＃34;的价值选择选项（因州而异）。如果我只使用一个if语句，但按钮失败，则该按钮有效。为什么是这样？另外，我想使用循环而不是那么多if语句。我怎样才能做到这一点？谢谢。

表格：

<form method="post" action="company.php">
        <select name="state_select" id="state_select">
            <option selected disabled>Choose a state</option>
            <option value="1">Connecticut</option>
            <option value="2">New Hampshire</option>
            <option value="3">New Jersey</option>
            <option value="4">New York</option>
        </select>
</div>        
<div id="select-div1" class="select-div">
        <select name="conn_select" id="carrier_select1"  class="carr-hide">
            <option selected disabled>Select a carrier - Conn</option>
            <? $options = ''; foreach($company_arryCT as $company) {$options .= "<option value='" . $company['Id'] . "'>" . $company['Name'] . "</option>";} echo $options; ?>     
        </select>
</div>
<div id="select-div" class="select-div">                      
        <select name="nh_select" id="carrier_select2" class="carr-hide">
            <option selected disabled>Select a carrier - NH</option>
            <? $options = ''; foreach($company_arryNH as $company) {$options .= "<option value='" . $company['Id'] . "'>" . $company['Name'] . "</option>";} echo $options; ?>
        </select>
</div>
<div id="select-div" class="select-div">                       
        <select name="nj_select" id="carrier_select3" class="carr-hide">
            <option selected disabled>Select a carrier - NJ</option>
             <? $options = ''; foreach($company_arryNJ as $company) {$options .= "<option value='" . $company['Id'] . "'>" . $company['Name'] . "</option>";}echo $options; ?>
        </select>
</div>
<div id ="select-div" class="select-div">                        
        <select name="ny_select" id="carrier_select4" class="carr-hide">
            <option selected disabled>Select a carrier - NY</option>
            <? $options = ''; foreach($company_arry as $company) {$options .= "<option value='" . $company['Id'] . "'>" . $company['Name'] . "</option>";} echo $options; ?>
        </select>      
</div>
<div id="display" class="grid_2 greedy" style="display:none;">
        <button id="display-btn" class="button-link" onclick="appendUrl()">Display</button>
</div>
    </form>

JS功能：

function appendUrl(){
var stateOptions = document.getElementById('state_select');
var carrOptions1 = document.getElementById('carrier_select1');
var carrOptions2 = document.getElementById('carrier_select2');
var carrOptions3 = document.getElementById('carrier_select3');
var carrOptions4 = document.getElementById('carrier_select4');
var URL = "http://dev.pia.org/GIA/surveys/performance/archive/company.php";

if (stateOptions.value == 1){  
  window.open(URL + '?id=' + carrOptions1.value, "_self");
}
if (stateOptions.value == 2){  
  window.open(URL + '?id=' + carrOptions2.value, "_self");
}
if (stateOptions.value == 3){  
  window.open(URL + '?id=' + carrOptions3.value, "_self");
}
if (stateOptions.value == 4){  
  window.open(URL + '?id=' + carrOptions4.value, "_self");
}
}

DROP-DOWN JAVASCRIPT：

function optionCheck() {
    var i, len, optionVal, helpDiv,
        selectOptions = document.getElementById("state_select");

    // loop through the options in case there
    // are multiple selected values
    for (i = 0, len = selectOptions.options.length; i < len; i++) {

        // get the selected option value
        optionVal = selectOptions.options[i].value;

        // find the corresponding help div
        helpDiv = document.getElementById("carrier_select" + optionVal);
        displayButton = document.getElementById('display-btn');
        //selectDiv = document.getElementsByClassName("select-div");

        // move on if we didn't find one
        if (!helpDiv) { continue; }

        // set CSS classes to show/hide help div
        if (selectOptions.options[i].selected) {
            helpDiv.className = "conn_select nh_select nj_select ny_select";
            $(helpDiv).addClass("dropdown-box");
        } else {
            //Hide carrier select on page load
            helpDiv.className = "carr-hide";
            //Hide display button when changing states
            $('#display').hide();
        }
    }    
}

// alternative method of binding the onchange handler
document.getElementById("state_select").onchange = optionCheck;

//Remove emtpy 'options' generated by PHP
$('[class=carr-hide] option').filter(function(){
    return this.value == ''
}).remove();

//Show display button when acrrier is selected
document.getElementById('carrier_select1').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select2').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select3').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select4').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

Answer 1

确实你必须把“==”而不是“=”。

此外，如果它没有解决你的问题，因为state_select被JS认为是“字符串”而不是“整数”。

请尝试使用引号：

(...)
if (stateOptions.value == "1"){  
  window.open(URL + '?id=' + carrOptions1.value, "_self");
} 
(...)

Answer 2

我修改了你的代码，将其推向你想要的方向。这应该（未经测试）工作，只要具有相同数量的输入（i <5 = 4选择）

function appendUrl(){
var stateOptions = document.getElementById('state_select');
var carrOptions;
for(i=1;i<5;i++)
{
   carrOptions[i-1] = document.getElementById('carrier_select'+i);
}
var URL ="http://dev.pia.org/GIA/surveys/performance/archive/company.php";
for(i=0;i<carrOptions.length;i++)
{
   if (stateOptions.value == (i+1)){  
     window.open(URL + '?id=' + carrOptions[i].value, "_self");
}

}
}

Answer 3

您的代码存在一些问题。

首先，您尝试检索所选选项的值的方式是错误的。 HTMLElementObject.value不适用于<select>个元素。要检索所选选项，您必须使用给定options元素的<select>对象。

其次，代替比较运算符==，您正在使用赋值运算符=，这是一个逻辑错误，它会使您的测试主要评估为真，为您提供您可能不期望的内容。

话虽如此，下面是一个成功检索<select>元素的选定选项值的函数，以及重写appendUrl' function. With the use of the切换statement, giving a more succinct code, compared to multiple if-else`语句的函数，当然还有修复你的逻辑错误。我希望它有所帮助。

function getSelectElementSelectedValue(elemID)
{
    var selectElem = document.getElementById(elemID);

    if(typeof selectElem !== 'undefined')
    {         
       var optionsObj = selectElem['options'];
       var selectedValue = optionsObj[optionsObj['selectedIndex']].value;
       return selectedValue;
    }
    else 
    { 
      alert('Could not find element with give id : ' + elemID);//you might choose to use `console.log()` instead
    }
}


function appendUrl()
{
    var selectedState = getSelectElementSelectedValue('state_select');
    var selectedCarr1 = getSelectElementSelectedValue('carrier_select1');
    var selectedCarr2 = getSelectElementSelectedValue('carrier_select2');
    var selectedCarr3 = getSelectElementSelectedValue('carrier_select3');
    var selectedCarr4 = getSelectElementSelectedValue('carrier_select4');
    var URL = "http://dev.pia.org/GIA/surveys/performance/archive/company.php";

  switch(selectedState)
  {
    case 1 : window.open(URL + '?id=' + selectedCarr1, "_self"); break;

    case 2 : window.open(URL + '?id=' + selectedCarr2, "_self"); break;

    case 3 : window.open(URL + '?id=' + selectedCarr3, "_self"); break;

    case 4 : window.open(URL + '?id=' + selectedCarr4, "_self"); break;
  }
}

更新的答案 HTML：

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<form method="post" action="company.php">
    <select name="state_select" id="state_select">
        <option selected disabled>Choose a state</option>
        <option value="1">Connecticut</option>
        <option value="2">New Hampshire</option>
        <option value="3">New Jersey</option>
        <option value="4">New York</option>
    </select>
</div>        
<div id="select-div1" class="select-div">
    <select name="conn_select" id="carrier_select1"  class="carr-hide">
        <option selected disabled>Select a carrier - Conn</option>
        <option value="1">Conn 1</option>
        <option value="2">Conn 2</option>
    </select>
</div>
<div id="select-div" class="select-div">                      
    <select name="nh_select" id="carrier_select2" class="carr-hide">
        <option selected disabled>Select a carrier - NH</option>
        <option value="3">NH 3</option>
        <option value="4">NH 4</option>
    </select>
</div>
<div id="select-div" class="select-div">                       
    <select name="nj_select" id="carrier_select3" class="carr-hide">
        <option selected disabled>Select a carrier - NJ</option>
         <option value="5">NJ 5</option>
        <option value="6">NJ 6</option>
    </select>
</div>
<div id ="select-div" class="select-div">                        
    <select name="ny_select" id="carrier_select4" class="carr-hide">
        <option selected disabled>Select a carrier - NY</option>
        <option value="7">NY 7</option>
        <option value="8">NY 8</option>
    </select>      
</div>
<div id="display" class="grid_2 greedy" style="display:none;">
    <button id="display-btn" class="button-link">Display</button>
</div>
</form>

JAVASCRIPT：

function optionCheck() { 
   var i, len, optionVal, helpDiv,
   selectOptions = document.getElementById("state_select");

   // loop through the options in case there
   // are multiple selected values
   for (i = 0, len = selectOptions.options.length; i < len; i++) {

       // get the selected option value
       optionVal = selectOptions.options[i].value;

       // find the corresponding help div
       helpDiv = document.getElementById("carrier_select" + optionVal);
       displayButton = document.getElementById('display-btn');
       //selectDiv = document.getElementsByClassName("select-div");

       // move on if we didn't find one
       if (!helpDiv) { continue; }

       // set CSS classes to show/hide help div
       if (selectOptions.options[i].selected) {
          helpDiv.className = "conn_select nh_select nj_select ny_select";
          $(helpDiv).addClass("dropdown-box");
       } else {
          //Hide carrier select on page load
          helpDiv.className = "carr-hide";
          //Hide display button when changing states
          $('#display').hide();
       }
   }    
}

// alternative method of binding the onchange handler
document.getElementById("state_select").onchange = optionCheck;

//Remove emtpy 'options' generated by PHP
$('[class=carr-hide] option').filter(function(){
    return this.value == ''
}).remove();

//Show display button when acrrier is selected
document.getElementById('carrier_select1').addEventListener('change', function () { 
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select2').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select3').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('carrier_select4').addEventListener('change', function () {
    var style = this.value > 0 ? 'block' : 'none';
    document.getElementById('display').style.display = style;
});

document.getElementById('display-btn').addEventListener('click', function () { 
    appendUrl();
});

function getSelectElementSelectedValue(elemID)
{
    var selectElem = document.getElementById(elemID);

   if(typeof selectElem !== 'undefined')
   {         
      var optionsObj = selectElem['options'];
      var selectedValue = optionsObj[optionsObj['selectedIndex']].value;
      return selectedValue;
   }
   else 
   { 
     alert('Could not find element with give id : ' + elemID);//you might choose to use `console.log()` instead
   }
}

function appendUrl()
{
    var selectedState = getSelectElementSelectedValue('state_select');
    var selectedCarr1 = getSelectElementSelectedValue('carrier_select1');
    var selectedCarr2 = getSelectElementSelectedValue('carrier_select2');
    var selectedCarr3 = getSelectElementSelectedValue('carrier_select3');
    var selectedCarr4 = getSelectElementSelectedValue('carrier_select4');
    var URL = "http://dev.pia.org/GIA/surveys/performance/archive/company.php";

  switch(selectedState)
  {
    case 1 : window.open(URL + '?id=' + selectedCarr1, "_self"); break;

    case 2 : window.open(URL + '?id=' + selectedCarr2, "_self"); break;

    case 3 : window.open(URL + '?id=' + selectedCarr3, "_self"); break;

    case 4 : window.open(URL + '?id=' + selectedCarr4, "_self"); break;
  }
}

我创建了一个工作示例，请查看：http://jsfiddle.net/naijaprogrammer/tcjwwq2b/15/

Answer 4

我已根据@NaijaProgrammer的答案提出答案。我所做的就是采取行动＆＃34;从我的表单中，在我的JS switch语句中即时添加它。还要添加＆＃34; .value＆＃34;到我的switch变量并在引用我的情况＆＃39; 1＆＃39;：case＆＃39; 2＆＃39;：等等。最后一点，我将按钮标记更改为更简单的输入 - 提交为我的形成。谢谢大家的帮助！

HTML更改：

<form id ="stateCarrForm" method="post" name="stateCarrierForm">

    <select name="state_select" id="state_select">
        <option selected disabled>Choose a state</option>
        <option value="1">Connecticut</option>
        <option value="2">New Hampshire</option>
        <option value="3">New Jersey</option>
        <option value="4">New York</option>
    </select>
</form>

<div id="display" class="grid_2 greedy" style="display:none;">
    <input id="display-btn" class="button-link" type="submit" value="Display"/>
</div>
    </form>

JS改变：

var selectedState = document.getElementById('state_select');
var carrOption1 = document.getElementById('carrier_select1');
var carrOption2 = document.getElementById('carrier_select2');
var carrOption3 = document.getElementById('carrier_select3');
var carrOption4 = document.getElementById('carrier_select4');

function appendUrl()
{
    switch (selectedState.value)
    {
    case '1': document.stateCarrierForm.action = "company.php?id=" + carrOption1.value; break;

    case '2': document.stateCarrierForm.action = "company.php?id=" + carrOption2.value; break;

    case '3': document.stateCarrierForm.action = "company.php?id=" + carrOption3.value; break;

    case '4': document.stateCarrierForm.action = "company.php?id=" + carrOption4.value; break;

    }
}

如果使用多个语句时语句不起作用

4 个答案: