Fatal编程技术网
  • javascript/
  • Javascript 使一个选择元素影响另一个选择元素

Javascript 使一个选择元素影响另一个选择元素

javascript html

Javascript 使一个选择元素影响另一个选择元素,javascript,html,Javascript,Html,我最近发布了一个相关的问题 我意识到我想做的更简单，但我希望我没有因为“双重发布”而违反论坛规则，因为这个问题略有不同。来吧。我想让“产品选择”影响“产品选择2” 选项1 选项2 选项1 选项2 我的问题是：当“productchoice”被更改时，我应该加入什么javascript来使“productchoice2”反映相同的选择 再次感谢你们的帮助，善良的人们 如果您想使用jQuery $('#productchoice').change(function (){

我最近发布了一个相关的问题

我意识到我想做的更简单，但我希望我没有因为“双重发布”而违反论坛规则，因为这个问题略有不同。来吧。我想让“产品选择”影响“产品选择2”


选项1
选项2
选项1
选项2
我的问题是：当“productchoice”被更改时，我应该加入什么javascript来使“productchoice2”反映相同的选择

再次感谢你们的帮助，善良的人们

如果您想使用jQuery

   $('#productchoice').change(function (){

        $('#productchoice2').val($(this).val());

   });

如果您想使用jQuery

   $('#productchoice').change(function (){

        $('#productchoice2').val($(this).val());

   });
HTML

<select id="productchoice" onchange="productchoicechange()">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>
<select id="productchoice2">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>

HTML

<select id="productchoice" onchange="productchoicechange()">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>
<select id="productchoice2">
    <option value="1">Option #1</option>
    <option value="2">Option #2</option>
</select>

使用纯JS可以做到这一点：

var select_element = document.getElementById('productchoice');

select_element.onchange = function(e){
    document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}
演示：

使用纯JS，您可以执行以下操作：

var select_element = document.getElementById('productchoice');

select_element.onchange = function(e){
    document.getElementById('productchoice2').value = this.options[this.selectedIndex].value;
}
演示：

尝试使用angularJS JSFiddle:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>
HTML:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>


选项1
选项2
选项1
选项2
尝试使用angularJS JSFiddle:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>
HTML:-

<html ng-app>     
    <body>
        <select id="productchoice"  ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
        <select id="productchoice2" ng-model="selection">
            <option value="1">Option #1</option>
            <option value="2">Option #2</option>
        </select>
    </body>
</html>


选项1
选项2
选项1
选项2
使用纯JS还是jQuery可以接受这个答案？你的尝试如何？jQuery对我很好。我尝试使用函数explode（）{$（“#productchoice2”）.val（$（“#productchoice”）.val（）；}；我给它加了一点变化。不起作用。使用纯JS或jQuery这个答案可以接受吗？你的尝试如何？jQuery对我很好。我尝试使用函数explode（）{$（“#productchoice2”）.val（$（“#productchoice”）.val（）；}；我给它加了一点变化。当我尝试按值运行时，我在ProductChoice2上得到一个空白选项。请看一看JSFIDLE示例，它是有效的。因此，您的代码或标记必须有所不同。谢谢，在我使用的网站设计器上不起作用，但在Dreamweaver和JSFIDLE上起作用。我会想办法的！我得到的资源被解释为脚本，但在chrome控制台上使用mime类型text/plain传输，你知道为什么吗？这可能会对你有所帮助，但听起来服务器提供的内容使用了不正确的mime。当我尝试按值计算时，我在ProductChoice2上得到一个空白选项。请看一看示例JSFIDLE，它是有效的。因此，您的代码或标记必须有所不同。谢谢，在我使用的网站设计器上不起作用，但在Dreamweaver和JSFIDLE上起作用。我会想办法的！我得到的资源被解释为脚本，但在chrome控制台上使用mime类型text/plain传输，你知道为什么吗？这可能会对你有所帮助，但听起来服务器提供的内容使用了不正确的mime。