Question

我希望从文本输入中获取值，并选择几个选择drop-drowns。这些将是客户的选择。然后我想将这些值传递给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的查询新手我似乎无法让这个工作。有什么帮助吗？

Answer 1

$(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+"'/>");
    }

参见 demo

Answer 2

将您的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+'/>
');
}

Answer 3

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

Answer 4

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

// 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/

由你来决定走哪条路。

从select中获取值并构建图像URL

4 个答案: