2016-06-14 88 views
2

我有一个“状态”选择和一些“载体”选择。为了简单起见,我在这里只使用两个载体选择。 我的jquery假设根据所选状态显示载体选择。 状态选择值被附加到运营商选择名称,以便我可以选择将哪个运营商选择添加到特定类别。jquery不显示select元素。控制台中没有错误

我的问题:我的航空公司选择不会出现。我曾经有过这样的工作,而且我一定在改变方向。不知道这里发生了什么。任何帮助都会很棒。谢谢!

编辑:我已经添加了我的原始JS来显示我在哪里,以及我如何改变到Jquery。

HTML:

<div style="width:160px;"> 
    <select name="state_select" id="state_select"> 
    <option value="0" selected>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="carrier_select" id="carrier_select1" class="carrier_select"> 
    <option selected disabled>Select a carrier - Conn</option> 
    <!--PHP GENERATED OPTIONS--> 
    </select> 
</div> 
<div id="select-div" class="select-div">      
    <select name="carrier_select" id="carrier_select2" class="carrier_select"> 
     <option selected disabled>Select a carrier - NH</option> 
      <!--PHP GENERATED OPTIONS--> 
    </select> 
</div> 

JQUERY:

$('#state_select').prop('selectedIndex', 0); 
$('.carrier_select').prop('selectedIndex', 0); 

function optionCheck() { 
    stateVal = $('div.select-div select').val(); 
    selectDiv = $('#carrier_select')[0] + stateVal; 

    if ($(stateVal).attr('selected', 'selected')) { 
    $(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select"); 
    $(selectDiv).addClass("dropdown-box"); 
    } else { 
    $(selectDiv).attr('class', 'carrier_select'); 
    } 
} 
$('#state_select').change(function(e) { 
    $('.carrier_select').prop('selectedIndex', 0); 
    optionCheck(); 
}); 

我的JavaScript(工程)TRYING JQUERY BEFORE:

function optionCheck() { 
    var i, len, optionVal, selectDiv, 
    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 
     selectDiv = document.getElementById("carrier_select" + optionVal); 
     // move on if I didn't find one 
     if (!selectDiv) { continue; } 
     // set CSS classes to show/hide help div 
     if (selectOptions.options[i].selected) { 
      selectDiv.className = "conn_select nh_select nj_select ny_select"; 
      $(selectDiv).addClass("dropdown-box"); 
     } else { 
      //Hide carrier select on page load 
      selectDiv.className = "carrier_select"; 
     } 
    } 
} 
// bind the onchange handler 
document.getElementById("state_select").onchange = optionCheck; 

CSS:

.select-div select { 
    border: none; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-indent: 1px; 
    text-overflow: ''; 
} 

.carrier_select { 
    display: none; 
} 

回答

1

首先,你的代码有一定的冗余,并在它的一些问题的决定在我的愚见,你可以工作,以简化和/或使它更可用左右。但是,有一种方法可以使用Javascript/jQuery代码实现您想要的大部分功能。有关完整的事,看看这个fiddle,脚本是下面的解释以及沿:

$('#state_select').prop('selectedIndex', 0); 
$('.carrier_select').prop('selectedIndex', 0); 

function optionCheck() { 
    stateVal = $('#state_select').val(); 
    selectDiv = $('#carrier_select'+ stateVal); 
    $('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select'); 
    $(selectDiv).removeClass('carrier_select').addClass('dropdown-box');  
    $($selectDiv).val('0'); 
} 
$('#state_select').change(function(e) { 
    optionCheck(); 
}); 

这样做是它得到的#state_selectval(),其追加到#carrier_select使得选择目标的权id,然后将所有活动选择器(除#state_selector_box(我将其包装为#state_select)更改为.carrier_select类中的选择器),从而使它们不可见,然后使用dropdown-box类最终使对应于选定状态的选择器可见。刚刚出现的选择器的val()也设置为0

+1

嘿谢谢! “下拉框”类实际上是一个保留的样式。对不起,我从样本中删除了它。但是我看到你在哪里,它是好的!我已经添加了我的旧JS,可能有助于了解我的位置。 –

1

你告诉CSS来隐藏元素

.carrier_select { 
    display: none; 
} 

的两个你选择的元素有类“carrier_select”和这个CSS定义的结果,在不显示的。删除或更改此定义以显示它们。

+0

我在想同样的事情。实际上,代码的其他问题/弱点似乎并没有围绕这个特定的CSS规则存在的事实来设计! –

0

没有评论的代码的其余部分,尝试删除

.carrier_select { 
    display: none; 
} 
1

以这样的方式,你可以看到运营商选择编辑。但您的问题的其他部分 - 追加到运营商名称,显示运营商依赖于状态需要更多的投入。

$('#state_select').prop('selectedIndex', 0); 
 
$('.carrier_select').prop('selectedIndex', 0); 
 

 
function optionCheck() { 
 
    stateVal = $('div.select-div select').val(); 
 
    selectDiv = $('#carrier_select')[0] + stateVal; 
 

 
    if ($(stateVal).attr('selected', 'selected')) { 
 
    $(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select"); 
 
    $(selectDiv).addClass("dropdown-box"); 
 
    } else { 
 
    $(selectDiv).attr('class', 'carrier_select'); 
 
    } 
 
} 
 
$('#state_select').change(function(e) { 
 
    $('.carrier_select').prop('selectedIndex', 0); 
 
    optionCheck(); 
 
});
.select-div select { 
 
    border: none; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    text-indent: 1px; 
 
    text-overflow: ''; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="dropdown-box" style="width:160px;"> 
 
    <select name="state_select" id="state_select"> 
 
    <option value="0" selected>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="carrier_select" id="carrier_select1" class="carrier_select"> 
 
    <option selected disabled>Select a carrier - Conn</option> 
 
    <!--PHP GENERATED OPTIONS--> 
 
    </select> 
 
</div> 
 
<div id="select-div" class="select-div">      
 
    <select name="carrier_select" id="carrier_select2" class="carrier_select"> 
 
    <option selected disabled>Select a carrier - NH</option> 
 
    <!--PHP GENERATED OPTIONS--> 
 
    </select> 
 
</div>

相关问题