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 
$(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

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

コード内の URL は変数であるため、「+」演算子を使用して文字列を変数と連結します。

于 2013-11-01T09:37:45.747 に答える