jQuery - using 'select' / 'option:selected' to apply .css().html().etc individually to page elements not working

Question

I'm attempting to create an add/subtract progress bar application with jQuery:

$(function(){
$('#selectChoice').change(function(){
  $('option:selected',this).each(function(){
    var id = $(this).attr('id');
      $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold").html(function(){
            $('#plus25').on('click', function() {

                $('#' + id + 'Item').html(function(i, value) {
                    var newWidth = parseInt(value*1+25);
                $('#' + id + 'Item').css('width', newWidth + '%');
                  if (value === 75 || value < 75){return newWidth;}
                else { preventDefault();}
                });
            });
        }); 
    });
  });
});

complete version can be seen here: http://georgehowell.biz/test/

I don't know where to find a solution for this..

select option is not released when another is chosen.
limits of 0 and 100% are exceeded

Any help would be greatly appreciated

what browser did you use? if you use safari and Internet Explorer, you need to remove the whole select box and make a new one. — Jacky Shek, Dec 09 '15 at 02:30

amitthk · Accepted Answer · 2015-12-15T01:44:51.753

Below is the sample I created using your code. I only changed the way u are fetching the selected ID. And I pulled the click functions outside of select change because this was intermixing the results.

var id = $('#selectChoice option:selected').attr('id');

I expect this is what you're looking for:-

$(function(){
    
$('#selectChoice').change(function(){
      $('option:selected',this).each(function(){


        var id = $('#selectChoice option:selected').attr('id');
        
            
            $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");
             
        
           $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");


                
                
                
           $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");
                
           $('#' + id + 'Item').css("color", "#f00").css("font-weight", "bold");   //end  html(function
            
            
            
        });   //end each(function
    });  //end change(function
        
                  $('#plus25').on('click', function(evt) {
                    var id= $('#selectChoice option:selected').attr('id');
                    
                    $('#' + id + 'Item').html(function(i, value) {
                        var newWidth = parseInt(value*1+25);
                    $('#' + id + 'Item').css('width', newWidth + '%');
                      if (value === 75 || value < 75){return newWidth;}
                    else { safePreventDefault(evt);}
                    });
                });
  
                  $('#plus10').on('click', function(e) {
                    var id= $('#selectChoice option:selected').attr('id');
                    
                $('#' + id + 'Item').html(function(i, value) {
                    var newWidth = parseInt(value*1+10);
                $('#' + id + 'Item').css('width', newWidth + '%');
                      if (value === 90 || value < 90){return newWidth;}
                    else { safePreventDefault(e);}
                    });
                });

  
   $('#minus25').on('click', function(e) {
     var id= $('#selectChoice option:selected').attr('id');
     
                $('#' + id + 'Item').html(function(i, value) {
                    var newWidth = parseInt(value*1-25);
                $('#' + id + 'Item').css('width', newWidth + '%');
                      if (value === 25 || value > 25){return newWidth;}
                    else { safePreventDefault(e);}
                    });
                });
  
                  $('#minus10').on('click', function(e) {
                    var id= $('#selectChoice option:selected').attr('id');
                $('#' + id + 'Item').html(function(i, value) {
                    var newWidth = parseInt(value*1-10);
                $('#' + id + 'Item').css('width', newWidth + '%');
                      if (value === 10 || value > 10){return newWidth;}
                    else { safePreventDefault(e);}
                    });
                });
  
  safePreventDefault=function(evt){
        //fix for IE Bug
        evt = evt || window.event;
        if (evt) {
            evt.returnValue = false;
        }
        if ((evt)&&(evt.preventDefault))
        { evt.preventDefault(); }
    };
  
});

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px; padding-top:50px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px; padding:20px;
  background-color: #666;
}
#progress1, #progress2, #progress3
{ background-color:#fff;
  margin:10px 20px 10px 20px;
height: 20px !important;
width: 96.5%;}


.item {background-color:#269abc !important; 
      text-align: center;
      margin:0; float:left;
width:0}


.well {background-color:#666;}

 select {margin:10px 0 0 10px;}
 .col-md-1 {min-width: 90px;}
.hide-for-med {display: block;}

/* Responsive Styles */

@media(max-width:1200px) {.hide-for-med {display: none;}}


@media(max-width:991px) {
    .customer-img,.img-related {margin-bottom: 30px; }
    #progress1, #progress2, #progress3 {width:95%;}
select {margin-left: 0}.hide-for-med {display: block;height:20px;}
.col-md-1 {width:20%; display: inline-block}

}


@media(max-width:767px) {
    .img-portfolio { margin-bottom: 15px; }
    #progress1, #progress2, #progress3 {width:94%;}
}

@media(max-width:480px) {
    #progress1, #progress2, #progress3 {width:90% !important;}
    .hide-for-med {width:10px !important; float:left; }
.col-md-1 {min-width:70px; margin:20px 0 0 5px; padding: 0; }
}

<link href="http://georgehowell.biz/test/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="index.html">jQuery+Bootstrap</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="index.html">About</a>
                    </li>
                    <li>
                        <a href="index.html">Services</a>
                    </li>
                    <li>
                        <a href="index.html">Contact</a>
                    </li>
                    
                    
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Page Content -->
    <div class="container">

<br /><hr />


        <!-- Main Section -->
        <div class="well">
            <div class="row">
                <div id="selectChoice-items">
<div class="col-md-12" id="progress1"><div id="output1Item" class="item">0</div></div>
<div class="col-md-12" id="progress2"><div id="output2Item" class="item">0</div></div>
<div class="col-md-12" id="progress3"><div id="output3Item" class="item">0</div></div>
                </div>
            </div>
            
            <div class="row">
                
<div class="col-md-4">
    <select class="btn btn-lg btn-default btn-block" name="selectChoice" id="selectChoice" data-native-menu="false" data-mini="true" >
        <option>select a row</option>
        <option value="1" id="output1">progress 1</option>
        <option value="2" id="output2">progress 2</option>
        <option value="3" id="output3">progress 3</option>
    </select>
</div>
                <div class="col-md-4 hide-for-med"></div>

                <div class="col-md-1">
                    <a class="btn btn-lg btn-default btn-block" href="#" id="minus25">-25</a>
                </div>
                <div class="col-md-1">
                    <a class="btn btn-lg btn-default btn-block" href="#" id="minus10">-10</a>
                </div>
                <div class="col-md-1">
                    <a class="btn btn-lg btn-default btn-block" href="#" id="plus10">+10</a>
                </div>
                <div class="col-md-1">
                    <a class="btn btn-lg btn-default btn-block" href="#" id="plus25">+25</a>
                </div>
                
                
            </div>
            
        </div>
        <hr />


    </div>
    <!-- /.container -->
    
    
    <!-- Footer -->
<footer class="footer">
    <div class="row">
        <div class="col-lg-12">
            <p></p>
        </div>
    </div>
</footer>

Thanks and great to hear that it works. You may want to take a look at [the answer in this thread](http://stackoverflow.com/questions/10575273/cross-browser-preventdefault-without-jquery) for a cross browser preventDefault. Have a great day ahead! — amitthk, Dec 15 '15 at 01:23
Hi, @GeorgeHowell, I updated the code above. Please take a look at safePreventDefault function and click event handlers of Plus and Minus buttons. Hope this helps! — amitthk, Dec 15 '15 at 01:47
Hi amitthk. should i post this as another question, so as to give you more points? this is my first question here, and I'm not sure how it all works. For example: "IE bug-fix for preventDefault()" Also, the arguments used are not sufficient to avoid throwing an error when 0 and/or 100% are exceeded. Perhaps I need to expand the 'if()' to include a few 'else if()'.. or use a different loop altogether? — George Howell, Dec 16 '15 at 10:39
Hi @GeorgeHowell, I think you're right - you can start another question with details of your problem scope. It will be easier to understand the problem in proper context. It is a different problem as well. Thanks. — amitthk, Dec 17 '15 at 06:41
hi @amitthk...... I've posted the last remaining problem to this function here: [link]http://stackoverflow.com/questions/34394909/e-preventdefault-in-an-if-else-statement-not-performing-100-to-conditions[/link] — George Howell, Dec 21 '15 at 11:54

jQuery - using 'select' / 'option:selected' to apply .css().html().etc individually to page elements not working

1 Answers1