根据选择选项附加或分离元素

时间:2017-10-06 02:48:44

标签: javascript jquery html dom drop-down-menu

我目前有一个表单,当从下拉列表1中选择特定选项时,会显示下拉列表2 -

下拉1 -

touchcancel

下拉2 -

<?php
  echo '<div class="full-divsn"><div class="col-md-4 col-sm-4 submit-contract-type">';
  echo '<div class="sublabels">Listing Type </div><div class="subins"><select name="contract" id="contracttype" class="form-control" required>';
  $property_contract_type = get_terms('property-contract-type', array(
      'hide_empty' => 0
  ));
  if (!empty($property_contract_type) && !is_wp_error($property_contract_type)) {
      foreach ($property_contract_type as $term) {
           $selected = ($property_contract_type_value == $term->name) ? "selected" : "";
           echo '<option id="' . $term->slug . '" ' . $selected . '>' . $term->name . '</option>';
      }
  } echo "</select>";
  echo '</div></div></div>';
?>

jQuery -

<div class="full-divsn" id="prop-terms"> <div class="col-md-4 col-sm-4">
<div class="sublabels">Terms </div>
<div class="subins">
  <select name="proplength" class="form-control">
    <option selected><?php echo $proplen; ?></option>
    <option value="Month to Month">Month to Month</option>
    <option value="6 Months">6 Months</option>
    <option value="1 Year">1 Year</option>
  </select>
</div></div></div>

它工作正常但是,隐藏下拉列表仍然允许将信息保存到表单中,所以我想从表单/ dom中删除第二个下拉列表,当正确的选项是下拉列表1没有被选中但我希望它选择该选项后重新出现。

我调查了分离,但我不确定如何将它应用于我的情况。

1 个答案:

答案 0 :(得分:0)

您可以添加.prop('disabled',...)之类的内容:

$("#prop-terms").show().prop('disabled',false);

$("#prop-terms").hide().prop('disabled',true);

更新:

我不知道#prop-terms<div>,而不是直接input 在这种情况下,你可以:

$("#prop-terms").show().find(':input').prop('disabled',false);

$("#prop-terms").hide().find(':input').prop('disabled',true);

无需分离/附加,禁用的元素将不会在表单请求中提交。