JavaScript 是一種非常強(qiáng)大的腳本語言,它可以幫助我們制作各種互動效果。其中,改變選項(xiàng)也是 JavaScript 經(jīng)常用到的功能之一。比如,當(dāng)用戶點(diǎn)擊一個復(fù)選框時,我們就可以利用 JavaScript 來改變這個復(fù)選框的選中狀態(tài),并且在頁面上動態(tài)顯示相應(yīng)的內(nèi)容。下面我們就來具體了解一下如何使用 JavaScript 改變選項(xiàng)吧。
一、改變單選框的選中狀態(tài)
<input type="radio" name="age" value="18" id="age1" /> <input type="radio" name="age" value="30" id="age2" /> <input type="radio" name="age" value="40" id="age3" /> <input type="radio" name="age" value="50" id="age4" /> <script type="text/javascript"> document.getElementById("age2").checked = true; </script>
我們可以使用 checked 屬性來改變單選框的選中狀態(tài)。在以上代碼中,我們通過 getElementById 方法獲取了 id 為 age2 的單選框,然后將其 checked 屬性設(shè)置為 true,這就會使得這個單選框被選中。如果我們要取消選中一個單選框,只需要將其 checked 屬性設(shè)置為 false 即可。
二、改變復(fù)選框的選中狀態(tài)
<input type="checkbox" name="fruit" value="apple" id="fruit1" /> 蘋果 <input type="checkbox" name="fruit" value="banana" id="fruit2" /> 香蕉 <input type="checkbox" name="fruit" value="orange" id="fruit3" /> 橙子 <script type="text/javascript"> document.getElementById("fruit1").checked = true; </script>
和單選框一樣,我們同樣可以使用 checked 屬性來改變復(fù)選框的選中狀態(tài)。以上代碼中,我們選中了 id 為 fruit1 的復(fù)選框。如果要選中多個復(fù)選框,只需要分別選中它們的 checked 屬性即可。
三、改變下拉框的選項(xiàng)
<select id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">廣州</option> </select> <script type="text/javascript"> document.getElementById("city").selectedIndex = 2; </script>
我們可以使用 selectedIndex 屬性來改變下拉框的選項(xiàng)。在以上代碼中,我們通過 selectedIndex 屬性將選中的下拉框選項(xiàng)設(shè)置為第三個,即 “廣州”。如果要選中其他選項(xiàng),只需改變 selectedIndex 的值即可。
四、改變多選下拉框的選項(xiàng)
<select id="multi" multiple="multiple"> <option value="apple">蘋果</option> <option value="banana">香蕉</option> <option value="orange">橙子</option> </select> <script type="text/javascript"> document.getElementById("multi").options[0].selected = true; document.getElementById("multi").options[1].selected = true; </script>
和改變下拉框類似,我們同樣可以使用 options 和 selected 屬性來改變多選下拉框的選項(xiàng)。以上代碼中,我們選中了 multi 下拉框中的前兩個選項(xiàng),即 “蘋果”和“香蕉”。如果要選擇其他選項(xiàng),只需分別修改相應(yīng)的 options 和 selected 屬性的值即可。
總結(jié)來說,JavaScript 中改變選項(xiàng)的方式有很多種,我們可以根據(jù)項(xiàng)目的需要選擇合適的方法。以上是一些常用的方式,希望對您有所幫助。