jQuery / Javascript —根据选择但不显示值显示div

Question

I am using PHP to dynamically populate a select box (a list of equipment). The value is set with the ID of the item selected so I can use it later in my programming.

What I need help with...

Based on the item selected I need to show/hide one of two form fields but I can't use the value as this is the id.

What I need to be able to do is read the text in the select box which will contain the item name with either (Service: Set by dates) or (Service: Set by hours) and show either the form field for the date or the form field for the hours?

Is this possible? I can find loads great resources based on the value but not on the text in the select.

I think something like this should work but not sure how to use the text in the select rather than the value.

$(function() {
$('#system').change(function(){
$('.system').hide();
$('#' + $(this).val()).show();
});
});

Any help would be greatly appreciated!!!!

Regards

Matt

(NB this is what I'm working with at the mo based on the answers so far, thank you all so much for the help (and for your example Louys Patrice Bessette) - not quite there yet... I was getting an error and managed to track it back to the script not getting the result from the select box. See below now working code! Thanks all!!!

<div class="col">
<div class="form-group">
<label for="system_select">Equipment or System to be serviced</label>
<select class="form-control" name="system_select" id="system_select">
<option></option>
<?php
$systems = DB::getInstance()->get('ym_system', 'vessel_id', '=', $vid);
foreach ($systems->results() as $system) {
?><option data-type="<?php echo $system->service_type ?>" value="<?php echo $system->system_id ?>"><?php echo $system->system_name; ?></option> <?php
}
?>
</select>
</div>
</div>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$("#due_dates").hide();   // Hide both divs
$("#due_hours").hide();   // Hide both divs
$('#system_select').change(function(){
var dataType = $(this).find(':selected').attr('data-type')  // should be "Set by dates" or "Set by hours"
if (dataType == 'Set by dates') {
$("#due_hours").hide();
$("#due_dates").show();
} else if (dataType == 'Set by hours') {
$("#due_dates").hide();
$("#due_hours").show();
}
});
});
</script>
<div class="row">
<div class="col-md-3" id="due_date">
<div class="form-group">
<label for="service_date">Next Service (Set by dates)</label>
<input type="date" class="form-control" name="service_date" id="service_date" value="<?php echo escape(Input::get('service_date')); ?>" autocomplete="off">
</div>
</div>
<div class="col-md-3" id="due_hour">
<div class="form-group">
<label for="service_hours">Next Service (Set by hours)</label>
<input type="number" class="form-control" name="service_hours" id="service_hours" value="<?php echo escape(Input::get('service_hours')); ?>" autocomplete="off">
</div>
</div>
</div>

Answer 1

I think that you PHP $system->service_type; is echoing either "Set by dates" or "Set by hours" .

If you echo that in a data attribute like this:

<select class="form-control" name="system_select" id="system_select">
  <option></option>
  <?php
  $systems = DB::getInstance()->get('ym_system', 'vessel_id', '=', $vid);
    foreach ($systems->results() as $system) {
      ?><option data-type="<?php echo $system->service_type; ?>" value="<?php echo $system->system_id ?>"><?php echo $system->system_name . ' (Service: '. $system->service_type .')'; ?></option> <?php
    }
  ?>
</select>

Then, in jQuery, you could use it like this to decide to show <div id="due_hours" class="col-md-3"> or <div id="due_hours" class="col-md-3"> .

$(function() {
  $('#system').change(function(){
    $('.system').hide();  // I don't know what this is for...

    $("div[id=^'due']").hide();   // Hide both divs

    var dataType = $(this).data("type");  // should be "Set by dates" or "Set by hours"
    var type = dataType.split(" by ")[1];  // should be "dates" ot "hours"

    $("#due_"+type).show();
  });
});

Now be carefull with the s on dates ...
Try this out... Console.log the values to make sure you have the correct one to match the id to show.

;)

Answer 2

If $(".classname").text() is not working you could try to add that info that you need in a "data" attribute.

Something like this ->

<option data-service="service name" class="myClass">15</option>

Using data attributes can give you a lot of freedom on what you can add. You could add lots of information that a normal user cant read (without inspecting element).

Then you would simply do something like this ->

$(".myClass").on("click", function() {
    var serviceData = $(this).attr("data-service");
})

You can then do if checks, compare and whatever you need.

EDIT: Or you can use your approach with on.change and get the selected data attr, it would probably be better

Answer 3

If you change your select into something like this:

<select class="form-control" name="system_select" id="system_select">                
   <option data-hide='#due_date' data-show='#due_hours'>Show Hours</option>
   <option data-hide='#due_hours' data-show='#due_date' value="B">Show Dates</option>
</select>

And your jquery like this:

$('#system_select').change(function () {
    $($(this).children("option:selected").attr("data-hide")).hide();
    $($(this).children("option:selected").attr("data-show")).show();
});

It could work.