简体   繁体   中英

dropdown selected value displays twice in dropdown option

i Have a javascript drop down which drops year automatically if i select a year it is display 2 times in the dropdown list .My aim is to display only 1 time in the option list.for eg if there is 3 years 2013,2014,2015.if i select 2013 .it displays like this

2013-selected
2013
2013
2014
2015.

pls any one help to rectify the problem.

            <select class="inputmedium" name="year_<?php echo $row->id; ?>" id="year_<?php echo $row->id; ?>" value="<?php echo $row->year; ?>">
            <option ><?php echo $row->year; ?></option>
             <script type="text/javascript">
             var min = new Date().getFullYear(),
    max =  min + 20,
    select = document.getElementById('year_<?php echo $row->id; ?>');

for (var i = min; i<=max; i++){
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}
</script>   </select>

Skip the option that was added in the PHP code:

for (var i = min; i<=max; i++){
    if (i == <?php echo $row->year; ?>) {
        continue;
    }
    var opt = document.createElement('option');
    opt.value = i;
    opt.innerHTML = i;
    select.appendChild(opt);
}

Please check this,

  var min = new Date().getFullYear(),
    max = min + 9,
    select = document.getElementById('year');

    for (var i = min; i <= max; i++) {
        var opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = i;

        var exists = 0 != $('#year option[value='+i+']').length;

        console.log(exists);

        if(!exists){    
            select.appendChild(opt);
        }
    }

http://jsfiddle.net/ddxm5/2/

another method:

    var min = new Date().getFullYear(),
    max = min + 9,
    select = document.getElementById('year');

    for (var i = min; i <= max; i++) {
        var opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = i;

        var exists= select.options[select.selectedIndex].value;         
        console.log(exists);

        if(exists!=i){    
            select.appendChild(opt);
        }
    }

http://jsfiddle.net/ddxm5/5/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM