0

我想从文本输入和几个选择下拉菜单中获取值。这些将是客户的选择。然后我想将这些值传递到 URL 中以显示图像 - 理想情况下，当客户做出选择时，没有提交按钮。这是我到目前为止所拥有的：

 <input type="tex" maxlength="8" value="YOUR REG" id="txt" name=""/>
 <select id="1" name="1" >
    <option value="1">text 1</option>
    <option value="2">text 2</option>
    <option value="3">text 3</option>
    <option value="4">text 4</option>
    <option value="5">text 5</option>
    <option value="6">text 6</option>
</select>
<select id="2" name="2" >
    <option value="1">text 1</option>
    <option value="2">text 2</option>
    <option value="3">text 3</option>
    <option value="4">text 4</option>
    <option value="5">text 5</option>
    <option value="6">text 6</option>
</select>
<select id="3" name="3" >
    <option value="1">text 1</option>
    <option value="2">text 2</option>
    <option value="3">text 3</option>
    <option value="4">text 4</option>
    <option value="5">text 5</option>
    <option value="6">text 6</option>
 </select>
 <div id="pContainer">
    <img id="img" src="http://dir/dir/Default.aspx?1=&2=&3=" class="img-responsive ">
 </div>
 $(document).ready (function DrawImg() {

    var txt = $("#txt").val();
    var 1 = $("#1").val;
    var 2 = $("#2").val;
    var 3 = $("#3").val;


        var url = 'http://dir/dir/Default.aspx?';
        url += 'txt=' + escape(txt);
        url += '&1=' + escape(1);
        url += '&2=' + escape(2);
        url += '&3=' + escape(3);

         $("#pContainer").html("<img src='url'/>");
    }
});

作为一个相对的 j Query 新手，我似乎无法让它发挥作用。请问有什么帮助吗？

4

4 回答 4

0

看起来您希望每次用户更改input文本和selects选项时都会生成图像 URL，因此：

// Just a shortcut for the document ready
$(function () {
    // On every change to the input or selects
    $("input, select").on("change", function () {
        var txt = $("#txt").val();
        var url = "http://dir/dir/Default.aspx?";           

        url += "txt=" + escape(txt);

        // Loop through all the selects         
        $("select").each(function () {
            url += "&" + $(this).attr("id") + "=" + escape($(this).val());
        });

        // Change the image source attribute
        $("#img").attr("src", url);
    });
});

演示：http: //jsfiddle.net/67WaW/

我建议您在用户实际完成选择时生成图像 URL，因此：

// Just a shortcut for the document ready
$(function () {
    // When the user finishes the selection    
    $("select:last").on("change", function () {
        var txt = $("#txt").val();
        var url = "http://dir/dir/Default.aspx?";           

        url += "txt=" + escape(txt);

        // Loop through all the selects         
        $("select").each(function () {
            url += "&" + $(this).attr("id") + "=" + escape($(this).val());
        });

        // Change the image source attribute
        $("#img").attr("src", url);
    });
});

演示：http: //jsfiddle.net/67WaW/1/

由您决定走哪条路。

于 2013-11-01T09:42:51.820 回答
0 
$(document).ready (function(){
DrawImg();
});

function DrawImg() {

    var txt = $("#txt").val();
    var test1 = $("#1").val();// variable name must be valid
    var test2 = $("#2").val();
    var test3 = $("#3").val();


        var url = 'http://dir/dir/Default.aspx?';
        url += 'txt=' + escape(txt);
        url += '&1=' + escape(test1);
        url += '&2=' + escape(test2);
        url += '&3=' + escape(test3);

         $("#pContainer").html("<img src='"+url+"'/>");
    }

看演示

于 2013-11-01T09:34:06.103 回答
0

将您的 jquery 代码更改为此。

$(document).ready (function () {
DrawImg();
});
function DrawImg() {
var txt = $("#txt").val();
var t1 = $("#1 option:selected").val;
var t2 = $("#2 option:selected").val;
var t3 = $("#3 option:selected").val;
var url = 'http://dir/dir/Default.aspx?';
url += 'txt=' + escape(txt);
url += '&1=' + escape(1);
url += '&2=' + escape(2);
url += '&3=' + escape(3);
alert('
<img src='+url+'/>
');
$("#pContainer").html('
<img src='+url+'/>
');
}
于 2013-11-01T09:34:10.700 回答
0

在您的代码中，URL 是一个变量，因此请使用“+”运算符将字符串与变量连接起来。

于 2013-11-01T09:37:45.747 回答