Jquery没有显示选择元素。控制台没有错误

时间:2016-06-14 17:19:38

标签: javascript jquery html css

我有一个"州"选择一些"运营商"选择。为简单起见,我在这里仅使用两个载波选择。 我的jquery假设显示运营商根据所选的状态选择。 状态选择值被附加到运营商选择名称,因此我可以选择添加特定类的运营商选择。

我的问题:我的运营商选择不会出现。我曾经有过这方面的工作,而且我必须在此过程中改变一些事情。不知道这里发生了什么。任何帮助都会很棒。谢谢!

编辑:我已经添加了我的原始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(作品)在拍摄JQUERY之前:

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;
}

4 个答案:

答案 0 :(得分:1)

你告诉css隐藏元素

.carrier_select {
  display: none;
}

您的两个select元素都具有“carrier_select”类,并且作为此css定义的结果,它们不会显示。删除或更改此定义以显示它们。

答案 1 :(得分: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>

答案 2 :(得分: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();
});

这样做是获取val()的{​​{1}},将其附加到#state_select,以便选择器定位正确的ID,然后更改除{{{{}之外的所有活动选择器1}}(我将#carrier_select包围)转换为具有#state_selector_box类的那些,从而使它们不可见,然后最终使用{{1}使得对应于所选状态的那个可见} .class。此外,刚出现的选择器的#state_select也设置为.carrier_select

答案 3 :(得分:0)

如果不评论其余代码,请尝试删除

x_c = [2.3, 3];
i = 1;
while i < 1000:
    curr_func = lambda x: rz(x) + i*(h_1(x)**2 + h_2(x)**2 + h_3(x)**2)
    x_c = minimize(curr_func, x_c).x;
    i  *= 1.2;
print(answer.x);