【问题标题】:Fill Adjacent Table Column OnChange Based on Dropdown Menu根据下拉菜单填充相邻表列 OnChange
【发布时间】:2012-12-19 19:08:45
【问题描述】:

我正在创建一个包含商店的照片库网站。我的编程经验相当有限,但在过去的几个月里,我对 HTML 和 PHP 有了不错的掌握。我正在尝试创建一个表格,允许用户从下拉菜单中选择产品规格。选择后,理想情况下,产品的价格将出现在相邻的列中。如果用户从下拉菜单中更改他们的选择,这个价格应该会改变。在将价格输出到屏幕时,我完全迷失了。出于测试目的,我包含了一个警报,它会创建一个弹出窗口以确保价格发生变化这是我迄今为止所拥有的......

     <TD>
     <select id="photo" onchange="price(this.value)">
            <option value="$">--Please Select--</option>
            <option value="$2.50">6" X 12" - $2.50</option>
            <option value="$3.50">6" X 18" - $3.75</option>
            <option value="$5.00">6" X 24" - $5.00</option>
    </select>
    </TD>
    <TD>
    <script>
         function price(data)
           {
              value=data;
              alert(value);
           }

    </script>
    </TD>

【问题讨论】:

    标签: drop-down-menu menu html-table onchange


    【解决方案1】:

    移动您的脚本,使其位于 HTML 文档的 head 标记之间,并将其更改为如下内容:

    <script type="text/javascript">
        function price(data)
        {
            var myDiv = document.getElementById( "itemPrice" );
            myDiv.innerHTML = data;
        }
    </script>
    

    然后改变你的第二个&LT;TD&GT;阻止这个:

    <td>
         <div id="itemPrice" name="itemPrice">
             Price will go here on selection
         </div>
    </td>
    

    这应该可以解决问题

    【讨论】:

    • 太棒了!谢谢您的帮助。由于某种原因,它不能与 getElementsByName 一起使用,所以我将其切换为 getElementById。
    • 是的,我的坏。 getElementsByName 是获取具有给定名称的元素数组。当您知道只有一个具有给定 ID 的元素时,getElementById 是正确的函数。我用正确的函数更新了我的答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-05-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-22
    相关资源
    最近更新 更多