我在单独的函数中得到了硬度，乳胶和厚度值的警告。但是我必须连接三个警报变量并传递给另一个div类function.concatenation值发布到div类的其他函数变量
我的Html：
<form id="samplecode" name="samplecode" method="POST" action="">
<div id='div1'>
<div class="col-md-12">
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step One:Choose a Support Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Firmness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="mySelect" name="mySelect" >
<option value="" >select Firmness</option>
<option value="Soft">SOFT</option>
<option value="Hard">HARD</option>
<option value="Thickness">THICKNESS</option>
</select>
</div>
<!-- <div class="col-md-1"> <img src='img/hard.jpg' id="image" class='img-hard' alt=''> </div> -->
<div id="Soft" class='col-md-8 value'>
<p> You select Soft.</p>
</div>
<div id="Hard" class='col-md-8 value'>
<p> You select Hard.</p>
</div>
<div id="Thickness" class='col-md-8 value'>
<p> You select thickness.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<label for="imageselect">
<img src="img/latex.jpg" id="image" class="selectimage" alt='' />
<input id="imageselect" name="imageselect" type="radio" style="display:none;" value="latex" />
</label>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="Select" name="Select" >
<option value="" >select Thickness</option>
<option value="Thick1">1</option>
<option value="Thick2">2</option>
<option value="Thick3">3</option>
</select>
</div>
<div id="Thick1" class='col-md-8 value'>
<p> You select Thickness1.</p>
</div>
<div id="Thick2" class='col-md-8 value'>
<p> You select Thickness2.</p>
</div>
<div id="Thick3" class='col-md-8 value'>
<p> You select Thickness3.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7 anchor'>
<div class='pull-right'>
<a href='#' id="summer" class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left ' >
<a href='#Pre' id="summerpre" class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
</form>
<!--closing first one div class -->
<!-- Second Comfort Layer container -->
<div class='container' id='div2' style="display:none;">
<div class="col-md-12" >
<div class='row'>
<div class="col-md-7 step-function">
<div class="form-group ">
<label class="one-step" >Step Two:Choose a Comfort Layer</label>
</div>
<div class="col-md-12">
<label class=" fireness-name" >Softness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Softness</option>
<option value="Soft">MEDIUM SOFT</option>
<option value="Hard">MEDIUM HARD</option>
<option value="Thickness">MEDIUM THICKNESS</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Material</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<img src='img/latex.jpg' alt=''>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-md-12">
<label class=" fireness-name" name="dropdown" >Thickness</label>
</div>
<div class="col-md-12 form-group">
<div class="col-md-4 col-lg-4 drop-menu">
<select class="form-control" id="sel1">
<option style="display:hidden;">select Thickness</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class='col-md-8'>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class='row'>
<div class="col-md-5">
<img class="cust-image-size" src='img/cust.jpg'>
</div>
</div>
</div>
</div>
<div class='col-md-7'>
<div class='pull-right anchor'>
<a href='#' id='summer2' class='next-color'>Next ❯❯</a>
</div>
<div class=' pull-left anchor' >
<a href='#Pre' id="summer1" class='next-color'><span>❮❮</span>Previous </a>
</div>
</div>
</div>
Jquery的：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$("#summerpre").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
//div 1 previous
$("#summer1").click(function(){
$('div[id ^=div]').hide();
$("#div1").show();
});
$(document).ready(function()
{
$('#samplecode').validate({
rules: {
mySelect: {
required: true
},
Select: {
required: true
},
imageselect:{
required: true
}
},
messages: {
mySelect: {
required: 'Please select a Firmness'
},
Select: {
required: 'Please select a Thickness'
},
imageselect:{
required: 'Please select the Image'
}
},
submitHandler: function(){
$('div[id ^=div]').hide();
$("#div2").show();
return false;
}
});
$("#summer").click(function() {
$("#samplecode").submit();
});
$(function(){
$('.value').hide();
$('#mySelect').change(function(){
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
//declare the variable to pass
var firmness = $(this).val();
$('#' + this.value).show();
alert(firmness);
//I am getting alert here and pass the variable to another function
});
});
var radio = $(this).val();
$('.selectimage').click(function() {
var img = $(this).css({border: '4px solid red'});
$('input').on('change', function() {
//declare the variable to pass
var radio=$('input[name="imageselect"]:checked').val();
var radio =$(this).val();
alert(radio);
//I am getting alert here and pass the variable to another function
//alert the vale fireness
});
});
$('.value').hide();
$('#Select').change(function()
{
$(this).find("option").each(function()
{
$('#' + this.value).hide();
});
$('#' + this.value).show();
//declare the variable to pass
var Thickness=$(this).val();
//alert the vale fireness
alert(Thickness);
//I am getting alert here and pass the variable to another function
//I have two concatenation of thee alert in jquery
});
});