Question

我在互联网上找到了这个代码，并根据我的需要进行了一些修改。我用css设置第一个选择列表，但我不能对第二个选择列表做同样的事情。我认为它需要一些js修改，但我的js知识并不那么好。我如何定制＆＃34; slist2＆＃34;就像我对＆＃34; slist1＆＃34;用css？

＆＃13;

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

＆＃13;

Answer 1

你会这样做：

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

甚至更好，像这样：

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

然后更改你的html以使用一个类（class =＆＃34; slist＆＃34;）而不是ID。

值得注意的是，由于span和select元素具有非常不同的默认样式，因此它们可能看起来不太相似，而且样式元素对样式很痛苦（以跨浏览器的方式，即）< / p>

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>

它使您的所有具有ID值的元素以＆＃34; slist＆＃34;开头。风格相同。

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

2 个答案: