如何<span>在javascript中</span>自定义<span>？</span>

Question

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> 

Answer 1

You would do it like this:

#slist1,
#slist2 {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
}

or even better, like this:

.slist {
    height: 35px;
    border: 3px solid #0c3f6b;
    border-radius: 25px;
}

Then change your html to use a class (class="slist") instead of an ID.

It's also worth noting that they may not look EXACTLY alike since the span and select elements have very different default styles, AND style elements are a pain to style (in a cross-browser way, that is)

Answer 2

<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.