Question

我在我的网站上创建了一个包含3个选项的下拉框。

我想更改网页上的某些文字，具体取决于所选的下拉项目。例如：

如果选择了下拉选项1，我希望页面上的一些文字显示“您选择了选项1 ”。

我不知道任何JavaScript，所以除了尝试搜索类似的解决方案之外，我还没有尝试过任何其他方法。

<select name="os0" style="background: #315d80; color: #fff; border-color: white; border: 0px;">
<option value="op1">Option 1</option>
<option value="op2">Option 2</option>
<option value="op3">Option 3</option>
</select>

Answer 1

完全使用jQuery（在我将问题添加到您的问题之前，我开始输入它，因此选项是意大利汽车品牌）。

https://jsfiddle.net/mL2c2xb6/

<强> HTML ：

<select id="carSelect">
    <option></option>
    <option value="Audi">Audi</option>
    <option value="Ferrari">Ferrari</option>
    <option value="Fiat">Fiat</option>
</select>

<p id="choiceDisplay">
    Selection Display
</p>

<强>使用Javascript：

$('select').change(function(){                // Listen to changes to <select> element
    const options = $("option");              // Get all the <option> elements.
    let selectedOption = "";                  // Var to store selected option value.
    options.each(function(index){             // Iterate  through option elements.
        let option = options[index];
        if($(option).prop("selected")) {      // Find the seletced one.
           selectedOption = $(option).val();  // Get the value and store it
        };
    });
    $("#choiceDisplay")
        .empty()
        .append(selectedOption);              // Display the result.
});

在网页上生成取决于下拉框选项的文本

2 个答案: