beginner, dropdown to fetch an html page? i'm close, but...
I realize this is probably well below the difficulty level expected for this forum, but, I'm truly stuck.
I'm simply trying to get a drop-down menu (without a go button) to fetch an HTML page and display it in a div. I tried using the jFrame plugin, but it would only work with HTML links, not javascript links.
I can get a dropdown to push its values into a div. I can get remote data using the simple ajax load function. What I can't seem to do is get these two to work together. I guess I don't understand how to get a variable from one $ command to another....
The dropdown is working fine, here:
-
<script>
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).val() + " ";
});
$("div").text(str);
})
.change();
});
</script>
and I'm getting the "value" of the dropdown fed into the div, via this HTML:
-
<select name="sweets" single="single">
<option selected value="">Choose wisely</option>
<option value="/directory1/directory2/file.html">David</option>
</select>
<div id="divname"></div>
And I've got the fetch/ajax thing working, like this:
-
<script>
$(document).ready(function(){
$("#divname").load("/directory1/directory2/file.html");
});
</script>
I tried to modify the first bit of jQuery, getting the string to act as a variable for the URL to fetch. Which means I've tried a few variations similar to this:
-
<script>
$(document).ready(function(){
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).val() + " ";
});
$("#divname").load("str");
})
.change();
});
</script>
...but it doesn't work. What seems to be the key line, here:
$("#divname").load("str");
I've tried variations such as, removing the quotes:
$("#divname").load(str);
Obviously, I have no idea what I'm doing... any help would be appreciated....