Question

我有一组单选按钮，单击时可以根据单击更改图像。

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

**另外，我觉得我在函数中有一个函数感觉不对...我只想弄清楚我是否需要.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>

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

Answer 1

是的，你在这里做的是每次有人更改select时添加一个onchange事件处理程序。除此之外，事件处理程序没有按照您的想法执行，因为“这个”不是您认为的那样。当您尝试基于“this.title”设置图像时，可能是未定义的或空字符串，因为“this”指的是select标记，而不是选定的选项。

除此之外，我建议删除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);
    });
});

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

var filename = $('#laserlite_color').val().replace(' ', '-') + '.jpg';

Answer 2

测试一下：

<强> HTML

<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函数中捕获它

Answer 3

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

中

$('#laserlite_color').change(function () {
      var title = this.options[this.selectedIndex].title;
      $('#valance-colors-placeholder img').attr('src', imgFldr+title); 
});

Answer 4

以下是您在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>

onChange用下拉标题替换img src而不是值

4 个答案: