0

我有一组单选按钮，单击时会起作用，它将根据单击更改图像。

现在我想根据下拉框选择更改图像。这是我的脚本的一部分。使用“标题”不合适吗？

**另外，我在一个函数中有一个函数感觉不对……我只是想弄清楚.change(function () {如果它已经被触发了，我是否还需要这个部分select's onchange？我尝试了有无，但它仍然没有替换图像。

<script type="text/javascript">
    function doCalc(){
    var roomX = $('#room_str').val();
    var otherroomX = $('#other_room').val();
    var qtyX = $('#qty_str').val();
    // etc. etc..
    // below is code that pertains to what i'm trying to do 

    var imgFldr2 = '/wp-content/uploads/2012/07/';
    var imagename = $('#laserlite_color option:selected').attr('title');
    $('#valance-colors-placeholder img').attr('src', imgFldr2 + imagename); 
    });
    // more code

和下拉框...

<select name="laserlite_color" id="laserlite_color" onchange="doCalc();">
    <option value="Gold 301" title="Gold-301.jpg">Gold</option>
    <option value="Chrome 303" title="Chrome-301.jpg">Chrome</option>
    <option value="Light Oak 304" title="Light-Oak-304.jpg">Light Oak</option>
    <option value="Dark Walnut 302" title="Dark-Walnut-302.jpg">Dark Walnut</option>
    <option value="White 307" title="White-307.jpg">White</option>
    <option value="Silk 630" title="Silk-630.jpg">Silk</option>
    <option value="Lilac 688" title="Lilac-688.jpg">Lilac</option>
    <option value="Blush 672" title="Blush-672.jpg">Blush</option>
    <option value="Sage 655" title="Sage-655.jpg">Sage</option>
    <option value="Denim 641" title="Denim-641.jpg">Denim</option>
    <option value="Black Satin 684" title="Black-Satin-684.jpg">Black Satin</option>
</select><br>

<div id="valance-colors-placeholder"><img src="/wp-content/uploads/2012/07/Gold-301.jpg"></div>

编辑：我已经用下面尼克的部分代码更新了我的代码。我只是想在这个网站上解释一下，我记得程序员说过要使用alert('whatever variable you need to see returned here');，这有助于查看代码的哪些部分是正常工作的，哪些部分不能正常工作。谢谢！！！

4

4 回答 4

2

是的，您在这里所做的是在每次有人更改选择时添加一个 onchange 事件处理程序。除此之外，事件处理程序不会做你认为应该做的事情，因为“this”不是你认为的那样。当您尝试根据“this.title”设置图像时，这可能是未定义的或空字符串，因为“this”指的是选择标签，而不是选定的选项。

除此之外，我建议在 html 中删除 select 上的 onchange 属性，让 jQuery 在你的脚本标签中做它擅长的事情：

$().ready(function() {
    $('#laserlite_color').change(function () {
        var roomX = $('#room_str').val();
        // ... the rest of what you're doing in doCalc ...
        var imgFldr2 = '/wp-content/uploads/2012/07/';
        var filename = $('#laserlite_color option:selected').attr('title');
        $('#valance-colors-placeholder img').attr('src', imgFldr2 + filename);
    });
});

至于（ab）使用title属性，你可能会认为选项的值和文件名之间应该有严格的关系。如果是这种情况，那么您可以在 select 标记上使用 jQuery 的 val()。幸运的是，从值到图像文件似乎存在一对一的映射。试试这个文件名行，而不是：

var filename = $('#laserlite_color').val().replace(' ', '-') + '.jpg';
于 2012-07-17T22:52:52.480 回答
1

测试这个：

HLML

<select name="laserlite_color" id="laserlite_color"  onchange="doCalc(this);">

Javascript

function doCalc(selectobj) {
        var value1 = selectobj[selectobj.selectedIndex].value
        var text1 = selectobj[selectobj.selectedIndex].text
       //your code
       //your code
       //your code
         $('#valance-colors-placeholder img').attr('src', imgFldr + value1);
    }

需要发送事件的值以在您的 JavaScript 函数中捕获它

于 2012-07-17T23:00:25.513 回答
1

您引用的select标题不存在并且返回空字符串。它是具有标题属性的选项。如果未调用 onchange，您可能需要将其放入$(document).ready(...)

$('#laserlite_color').change(function () {
      var title = this.options[this.selectedIndex].title;
      $('#valance-colors-placeholder img').attr('src', imgFldr+title); 
});
于 2012-07-17T23:17:37.843 回答
0

这是您应该在 html 部分中添加的选择选项 

<select name="number" id="course" style="width:158px;" onchange="getImage(this)">
                    <option value="" disabled selected>Select your option</option>
                   <option value= 1 > Image1 </option>
                    <option value= 2 > Image2 </option>
                    </select>

为显示图像创建单独的 css

<img id="imgt" style="width:750px; height: 475px;"/></div>

这是脚本 

 <script type="text/javascript">
            function getImage(v) {
                var num = v.value;                
                if (num == 1) {
                    document.getElementById("imgt").setAttribute("src", "images/image1.png");
                }
                else  (num == 2) {
                    document.getElementById("imgt").setAttribute("src", "images/image2.png");
                }
                }
        </script>
于 2013-05-23T12:49:06.763 回答