How to customize in javascript?


Tags: javascript,jquery,html,css

Problem :

I found this code on the internet and made some modifications for my need. I style first select list with css but i can't do the same for the second select list. I think it needs some js modifications but my js knowledge is not that good. How do i customize "slist2" like i did to "slist1" with css?

<!-- The first select list -->
<style>
  #slist1 {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
  }

  #scontent {
    color: #0c3f6b;
    font-size: 25px
  }
  
  #content {
    width: 290px;
    float: left;
    padding: 5px 15px;
  }
  
  #middle {
    width: 294px;
    /* Account for margins + border values */
    float: left;
    padding: 5px 15px;
    margin: 0px 5px 5px 5px;
  }
  
  #sidebar {
    width: 270px;
    padding: 5px 15px;
    float: left;
  }

</style>
<section id="content">
  PICK UP LOCATION
  <select name="slist1" div id=slist1 onchange="SList.getSelect('slist2', this.value);">
    <option>- - -</option>
    <option value="newyork">New York</option>
    <option value="miami">Miami</option>
  </select>
</section>
<!-- Tags for the seccond dropdown list, and for text-content -->
<section id="middle">
  <span id="slist2"></span>
</section>
<section id="sidebar">
  <div id="scontent"></div>
</section>


<script>
  <!--
  /* Script Double Select Dropdown List, from: coursesweb.net/javascript/ */
  var SList = new Object(); // JS object that stores data for options

  // HERE replace the value with the text you want to be displayed near Select
  var txtsl2 = 'DROP OFF LOCATION';

  /*
   Property with options for the Seccond select list
   The key in this object must be the same with the values of the options added in the first select
   The values in the array associated to each key represent options of the seccond select
  */
  SList.slist2 = {
    "newyork": ['San Diego', 'Portland','Ohio', 'San Francisco'],
    "miami": ['San Diego', 'Portland','Ohio', 'San Francisco'],
   
   };

  /*
   Property with text-content associated with the options of the 2nd select list
   The key in this object must be the same with the values (options) added in each Array in "slist2" above
   The values of each key represent the content displayed after the user selects an option in 2nd dropdown list
  */
  SList.scontent = { 
    
    "San Diego": '45€',
    "Portland": '60€',
    "Ohio": '35€',
    "San Francisco": '25€',
    
};

  /* From here no need to modify */

  // function to get the dropdown list, or content
  SList.getSelect = function(slist, option) {
      document.getElementById('scontent').innerHTML = ''; // empty option-content

      if (SList[slist][option]) {
        // if option from the last Select, add text-content, else, set dropdown list
        if (slist == 'scontent') document.getElementById('scontent').innerHTML = SList[slist][option];
        else if (slist == 'slist2') {
          var addata = '<option>- - -</option>';
          for (var i = 0; i < SList[slist][option].length; i++) {
            addata += '<option value="' + SList[slist][option][i] + '">' + SList[slist][option][i] + '</option>';
          }

          document.getElementById('slist2').innerHTML = txtsl2 + ' <select name="slist2" onchange="SList.getSelect(\'scontent\', this.value);">' + addata + '</select>';
        }
      } else if (slist == 'slist2') {
        // empty the tag for 2nd select list
        document.getElementById('slist2').innerHTML = '';
      }
    }
    -->

</script>



Solution :

<style>
[id^="slist"] {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
}
</style>

 <select id="slist1"></select>
 <select id="slist2"></select>
 <select id="slist3"></select>

It makes your all elements with ID of value begins with "slist" styled the same.


    CSS Howto..

    How to make balloon textbook talking style using css

    How to make emails responsive?

    How can I make my form field have a background image?

    How to make diagonal titles on html tables

    How can I replicate something similar to querySelector in browsers like IE 7 and 6?

    How (and why) to use display: table-cell (CSS)

    How to make a webpage mobile friendly with css media queries

    How to create a CSS only (vertical) drop-down menu?

    jQuery — how to animate a div using height:auto

    How does one customize the appearance of jquery.perfect-scrollbar?

    CSS: How to center a bottom-fixed menu

    CSS flexbox: How to get column items to fill height

    How to keep nav bar from shifting elements to next line when zooming in?

    How to use Bootstrap3 media queries for custom CSS? [closed]

    How to align a picture,name and the post with css like facebook does?

    How to detect CSS inheritance source?

    How do I correctly position elements and lay out a page?

    How to pivot image with CSS and Javascript

    How to include stylesheet file only for one div?

    How to add class with data-attribute?

    How to add a specific class to select2 drop element?

    css ul li nested menu with a padding. How on hoover retain width of the menu?

    How to repeat a CSS shape horizontally?

    How to get the table (datatable) left aligned?

    How to do centered

    with
    on both sides over a background image

    How to dynamically generate an entire class and concatenate it to its parent selector using LESS

    CSS: How to set hover effect on menu-item when submenu-item is displayed

    How to make this Header/Content/Footer/Menu layout using CSS?

    How can i fit my webPage in browser when user makes browser window big?

    How to add css on elements created through ajax (jquery)?