Question

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

我需要什么帮助...

基于选定的项目，我需要显示/隐藏两个表单字段之一，但是我不能使用该值，因为这是id。

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

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

我认为类似的方法应该起作用，但不能确定如何在选择中使用文本而不是值。

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

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

致谢

马特

（注意，这是到目前为止我正在与mo进行合作的原因，非常感谢大家的帮助（并以您的示例Louys Patrice Bessette为例）-尚不存在...我当时遇到错误并设法将其追溯到脚本，而没有从选择框中获得结果。请参见下面的工作代码！谢谢！！！

<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相匹配的正确值。

;）

Answer 2

如果$(".classname").text()不起作用，您可以尝试在“数据”属性中添加所需的信息。

类似的东西->

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

使用数据属性可以为您添加的内容提供很大的自由度。您可以添加许多普通用户无法阅读的信息（不带检查元素）。

然后您只需执行以下操作->

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

然后可以进行检查，比较以及所需的任何操作。

编辑：或者您可以对on.change使用方法并获得选定的数据attr，可能会更好

Answer 3

如果您将选择更改为以下内容：

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

您的jquery是这样的：

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

它可以工作。

jQuery / Javascript-根据select但不是value显示div

3 个答案: