我创建了一个动态输入。每个生成的输入行都有两个下拉菜单。第一个输入名为“select_product[]"，它从DB中获取项目。我在产品名称中创建了一个属性[data-wh]，如下行所示
echo"<option data-wh='$wh' value ='$i->s_id'>".$i->s_name. "</option>";data-wh打印以逗号分隔的仓库ID示例data-wh ='1，2，6'
关于select_product[]，如果仓库ID=data-wh，我希望另一个下拉菜单“warehouse[]”更改输出。
经过很长时间的搜索，我找到了一个下面的行，可能会驱使我实现它，但没有运气。
<script>
$("#product_name").on('change', function(slc) {
var values = $(this).val().split(',') //split value which is selected
$("#warehouse option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#warehouse option[value=" + vals + "]").show()//show that option
}
})</script>另外，请检查我的所有代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mohamed Syam">
<title>New Invoice | <?php echo $userdata[0]['s_name'];?></title>
<!-- Bootstrap Core CSS -->
<link href="<?php echo base_url();?>vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="<?php echo base_url();?>vendor/metisMenu/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="<?php echo base_url();?>dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="<?php echo base_url();?>vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="<?php echo base_url();?>js/jquery.min.js.download"></script>
<script src="<?php echo base_url();?>js/0a3b9034e109d88d72f83c9e6c9d13b7.js.download"></script>
<link rel="stylesheet" href="<?php echo base_url();?>css/bootstrap-select.min.css" />
</head>
<body >
<div id="wrapper">
<!-- Navigation -->
<?php include_once('nav_v.php');?>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Invoice</h1>
</div>
</div>
<?php if($this->session->flashdata('done')): ?>
<div class="alert alert-success">
<strong>Success!</strong> <?php echo $this->session->flashdata('done'); ?>
</div>
<?php endif;?>
<?php if($this->session->flashdata('error')): ?>
<div class="alert alert-warning">
<strong>Warning!</strong> <?php echo $this->session->flashdata('error'); ?>
</div>
<?php endif;?>
<?php echo validation_errors(); ?>
<!-- ... Your content goes here ... -->
<?php $form=array('id'=>'myform');?>
<?php echo form_open('Order/submit',$form);?>
<div class="panel panel-default">
<div class="panel-heading">Header</div>
<div class="panel-body">
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
<option disabled selected> Vendor</option>
<?php foreach ($vendors as $v):
echo "<option value ='$v->v_id'>" . $v->v_name . "</option>";
endforeach;
?>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_number" oninput="this.value = this.value.replace(/[^0-9./]/g, '').replace(/(\..*?)\..*/g, '$1');" placeholder="Invoice Number"/>
</div>
<div class="col-xs-3">
<input type="date" data-provide="datepicker" class="form-control" name="Invoice_date" />
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_desc" placeholder="Description" />
</div>
</div><!--customer panel-Body-->
<div class="panel-heading">Invoice Details
</div>
<div class="panel-body">
<div id="education_fields">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" id="product_name" name="select_product[]">
<option selected disabled>Select Item</option>
<?php
foreach($items as $i):
$wh=trim($i->whs);
$wh=preg_replace('/[ ,]+/', ',', $wh);
echo"<option data-wh='$wh' value ='$i->s_id'>".$i->s_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" id="warehouse" name="warehouse[]">
<?php if (count($uwh) > 1){echo "<option selected disabled>Select Warehouse</option>";}?>
<?php
foreach($uwh as $w):
echo"<option value ='$w->w_id'>".$w->w_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control total" name="total[]" value="" placeholder="Total" readonly >
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another item field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last item :)</small></div>
</div>
<button type="submit" class="btn btn-primary center-block">Order Now </button>
<?php echo form_close();?>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
<script>
var room = 0;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option disabled value="">Select Item</option><?php if(count($items) > 1){?> <option selected disabled>Select Item</option><?php } foreach($items as $i){ ?><option data-wh="<?php echo $i->s_name; ?>" value =""><?php echo $i->s_name; ?></option> <?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="warehouse[]"><?php foreach($uwh as $w){?> <option value ="<?php echo $w->w_id;?>"><?php echo $w->w_name;?> </option>;<?php } ?></select></div></div> <div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input type="text" class="form-control total" name="total[]" placeholder="Total" readonly /><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
divtest.innerHTML = medo;
objTo.appendChild(divtest);
$('select').selectpicker();
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
<script>
$("#product_name").on('change', function(slc) {
var values = $(this).val().split(',') //split value which is selected
$("#warehouse option").hide() //hide all options from slect box
//loop through values
for (var i = 0; i < values.length; i++) {
var vals = values[i]
$("#warehouse option[value=" + vals + "]").show()//show that option
}
})
</script>
<script src="<?php echo base_url();?>js/bootstrap-select.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url();?>js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<?php echo base_url();?>js/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<?php echo base_url();?>js/startmin.js"></script>
</body>
</html>
1条答案
按热度按时间uelo1irk1#
我对HTML和jQuery函数行进行了更改。
HTML我为Select [.Prod]元素创建了一个新类，并在Select元素生效和更改时执行jQuery。
jQuery我调用元素data-wh到数组中。如果值包含在第一个Select元素中，for循环将显示另一个Select元素。