保存与下拉列表选择对应的文本框值

时间:2015-02-03 10:43:32

标签: jquery html

我有一个下拉框,我在其中选择一个值并在文本框中输入值(例如:我选择了2楼并在3个文本框中输入相应的值,再次在3楼和相应的值中输入等等,最后两者都应该得到追加。幸运的是我得到了这个。)但问题是每当我更改文本框值时它应该覆盖相同的下拉值但是它保存了文本框的先前值和当前值(例如:如果我选择第5个flooor并在文本框中写入值如果我再次改变它,它不会被覆盖而不是它用相同的值保存两次)。 请帮我解决这个问题。 http://jsfiddle.net/ztord9py/13/

var areaoffered=[];     
     var floor=[];
     var timeline=[];
     var floorss;

     $("#floor").change(function(){
         floorss =  $("#floor").val(); 
     });  

        $("#areaoffered").change(function(){
        var areamax = $("#areaoffered").val(); 
        var areamin = (floorss+"-"+areamax);  
        areaoffered.push(areamin);

        });  

        $("#components").change(function(){
           var componentsmax = $("#components").val(); 
           var componentsmin = (floorss+"-"+componentsmax);  
            floor.push(componentsmin);

         });    

       $("#timeline").change(function(){
           var timelinemax = $("#timeline").val(); 
           var timelinemin = (floorss+"-"+timelinemax);  
           timeline.push(timelinemin);

         });

$("#submitt").click(function(){
    alert(areaoffered);
});

<select   id="floor" >
    <option value="1st floor">1st floor </option>
    <option value="2nd floor">2nd floor</option>
    <option value="3rd floor">3rd floor</option>
    <option value="4th floor">4th floor</option>
    <option value="5th floor">5th floor</option>
</select></br>
<input type="text" id="areaoffered"   /></br>
<input type="text"  id="components"   /></br>
<input type="text"  id="timeline"   /></br>
<input   type="button" value="Submit" id="submitt" />

3 个答案:

答案 0 :(得分:1)

替换$("#floor").change();

中的行
var floorss={};
$("#floor").change(function(){
     floorss[$("#floor").val()] =  $("#floor").val(); 
 }); 

答案 1 :(得分:0)

清除警报后var areaoffer的值。

答案 2 :(得分:0)

我自己找到了答案

 var floors = [];
var timelines=[];
var areas=[];
 var components = [];


 $("#floor").change(function(){
    $("#areaoffered").val(areas[$("#floor").val()]); 
    $("#components").val(components[$("#floor").val()]); 
    $("#timeline").val(timelines[$("#floor").val()]); 

 });  

    $("#areaoffered").change(function(){
    var areaOffered = $("#areaoffered").val();
    areas[$("#floor").val()] = areaOffered;
    }); 


    $("#components").change(function(){
       var componentsmax = $("#components").val(); 
       components[$("#floor").val()] = componentsmax ;
    });     

   $("#timeline").change(function(){
       var timelinemax = $("#timeline").val(); 
       timelines[$("#floor").val()]=timelinemax;
     });     


$("#submitt").click(function(){
var finalDetails = [];
    for(var i=1;i<16;i++)
    {
        if(areas[i]!=undefined)
            finalDetails.push('floor:'+i+'      areaOffered:'+areas[i]+'    components:'+components[i]);
    }
     alert(finalDetails);
});