javascript - JQuery/Javascript -- 基于选择而不是值显示 div

Question

我正在使用 PHP 动态填充选择框(设备列表)。该值是使用所选项目的 ID 设置的，以便我稍后可以在编程中使用它。

我需要什么帮助...

根据所选项目，我需要显示/隐藏两个表单字段之一，但我无法使用该值，因为这是 ID。

我需要做的是阅读选择框中的文本，其中包含带有(服务:按日期设置)或(服务:按小时设置)的项目名称，并显示表单字段日期或小时的表单字段？

这可能吗？我可以根据值而不是选择中的文本找到大量资源。

我认为这样的东西应该可以工作，但不确定如何使用选择中的文本而不是值。

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

任何帮助将不胜感激!!!!

问候

马特

(注意，这是我根据到目前为止的答案正在做的工作，非常感谢大家的帮助(以及你的例子路易斯·帕特里斯·贝塞特) - 还没有完全实现......我是收到错误并设法将其跟踪回脚本，未从选择框中获取结果。请参阅下面现在的工作代码!谢谢大家!!!

<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

我认为你 PHP $system->service_type;回显 "Set by dates"或"Set by hours" .

如果您在这样的数据属性中回显这一点:

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

然后，在 jQuery 中，您可以像这样使用它来决定显示 <div id="due_hours" class="col-md-3">或<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();
  });
});

现在要小心 s上dates ...
试试这个... Console.log 值以确保您拥有与要显示的 id 相匹配的正确值。

;)