javascript getElementById start with

问题:

I want to select div start with * to change it from display: block to display:hidden

function select_to_text(a) {
  var as = '#' + a;
  var aa = $(as).val();
  if (aa == "0") {} else {
    //var $eles = $(":*[name^='personal_family_type_']").css("background-color","yellow");
    document.getElementById(a + "_" + aa + "_block").style.display = 'block';
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label for="personal_family_type" class="control-label col-sm-2">type</label>
  <div class="col-sm-10">
    <select size="1" id="personal_family_type" name="personal_family_type" class="form-control btn btn-primary" onchange="select_to_text('personal_family_type')">
      <option value="0">----</option>
      <option value="wife">Wife</option>
      <option value="husband">Husband</option>
      <option value="son">Son</option>
      <option value="all">Show all</option>
    </select>
    <div id="personal_family_type_wife_block" style="display :none">
      wife
    </div>
    <div id="personal_family_type_husband_block" style="display :none">
      husband
    </div>
    <div id="personal_family_type_son_block" style="display :none">
      son
    </div>
  </div>
</div>

回答1:

Here is a solution done in jQuery. Remove the onclick from your html element.

$( document ).ready(function() {
   $('#personal_family_type').on('click', function() {
       $("#"+this.id + "_" + this.value + "_block").toggle();
   });
});

Here is a Demo

回答2:

you should not pass in params to your onchange handler -- you can get more flexibility if you tap into the event callback stuff via javascript. I'd also utilize classes to find your elements of interest...there are ways to make the selector more efficient, but to illustrate the point, I'm keeping it simple.

to start -- replace some of the encoded information from the id of the divs with class names and remove the onchange property.

<div class="form-group">
   <label for="personal_family_type" class="control-label col-sm-2">type</label>
   <div class="col-sm-10">
      <select size="1" id="personal_family_type" name="personal_family_type" class="form-control btn btn-primary" >
         <option value="0">----</option>
         <option value="wife">Wife</option>
         <option value="husband">Husband</option>
         <option value="son">Son</option>
         <option value="all">Show all</option>
      </select>
      <div id="wife_block" class="personal_family_type" style="display :none">
      wife
      </div>
      <div id="husband_block" class="personal_family_type" style="display :none">
      husband
      </div>
      <div id="son_block" class="personal_family_type" style="display :none">
      son
      </div>
   </div>
</div>

next, bind your select element to the onchange handler and then the logic in select_to_text, in a nutshell:

set all elements to display:none, then set the specific elements to display:block per the settings (I'm assuming I understand the way this is supposed to work).

script:

$('#personal_family_type').on('change',select_to_text);

function select_to_text(evt) {
    var $blocks;

    $blocks = $('.'+evt.target.id).hide();

    switch (evt.target.value) {
       case '0':
          break;
       case 'all':

          $blocks.show();
          break;
       default:
         $('#' + evt.target.value + "_block").show();
    }
}

回答3:

You should definitely use jQuery in this case. If I understand your question correctly, you could do something like this:

$("#personal_family_type option:selected").click(function() {
     var family_select_option = $(this).val();
     $('#personal_family_type_'+family_select_option+'block').show();
});

回答4:

Given:

<select size="1" id="personal_family_type" name="personal_family_type"
 class="form-control btn btn-primary" 
 onchange="select_to_text('personal_family_type')">

You can instead do:

<select size="1" name="personal_family_type"
 class="form-control btn btn-primary" 
 onchange="select_to_text(this)">

then in the function:

// a is a reference to the element calling the function
function select_to_text(a) {
  var aa = a.value;

then I think you want:

  if (aa !== "0") {
    var el = document.getElementById(a.name + '_' + aa + '_block');

    // set display to empty string so adopts default or inherited style
    if (el) el.style.display = '';
  }
}

which can be reduced to:

function select_to_text(a) {
  if (aa.value !== '0')
    document.getElementById(a.name + '_' + aa.value + '_block'.style.display = '';
}