JQuery/Javascript --根据select而不是value显示div
我使用PHP动态填充选择框(设备列表)。该值是使用所选项目的ID设置的，因此我可以在以后的编程中使用它。
我需要帮助的是。
根据所选的项，我需要显示/隐藏两个表单域中的一个，但不能使用该值，因为这是id。
我需要能够做的是阅读选择框中的文本，选择框中将包含项目名称(服务:按日期设置)或(服务:按小时设置)，并显示日期的表单域或小时的表单域？
这个是可能的吗？我可以根据值而不是select中的文本找到加载很好的资源。
我认为这样的东西应该可以工作，但不确定如何在select中使用文本而不是value。
$(function() {
$('#system').change(function(){
$('.system').hide();
$('#' + $(this).val()).show();
});
});任何帮助都非常感谢！
问候
哑光
(注:这就是我在mo的工作，基于到目前为止的答案，非常感谢你们的帮助(以及你的例子Louys Patrice )-还没有到那一步……我得到了一个错误，并设法追踪到脚本没有从选择框中获得结果。请看下面的工作代码！感谢所有人！
<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>回答 3
Stack Overflow用户
发布于 2018-09-09 22:51:25
我认为你的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();
});
});现在要小心dates上的s ...
试试这个..。Console.log这些值，以确保您拥有与要显示的id相匹配的正确值。
;)
Stack Overflow用户
发布于 2018-09-09 22:20:42
如果$(".classname").text()不工作，您可以尝试在"data“属性中添加所需信息。
类似这样的->
<option data-service="service name" class="myClass">15</option>使用数据属性可以让您在添加内容方面有很大的自由度。您可以添加许多普通用户无法读取的信息(如果不检查元素)。
然后，您可以简单地执行如下所示的->
$(".myClass").on("click", function() {
var serviceData = $(this).attr("data-service");
})然后，您可以执行if检查、比较和所需的任何操作。
编辑:或者您可以将您的方法用于on.change并获取所选的数据属性，这样可能会更好
Stack Overflow用户
发布于 2018-09-09 22:37:06
如果您将select更改为如下所示：
<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();
});这能行得通。
https://stackoverflow.com/questions/52245100
复制相似问题