Question

我这里有一个简单的页面（底部），它有2个相关的选择框。当在第一个中选择类别时，第二个填充网站。我可以从第二个选择框中选择网站，然后更新iframe src。

我的问题是，如何让prev / next按钮触发ONCHANGE或ONCLICK？

如：

ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value"

下面的代码片段就像我猜的那样，但我无法让它发挥作用。

 $(document).ready(function(){
    $("#next").click(function() {
        var isLastElementSelected = $('#selectwebsites > option:selected').index() == $('#selectwebsites > option').length -1;

    if (!isLastElementSelected) {
        $('#selectwebsites > option:selected').removeAttr('selected').next('option').attr('selected', 'selected');
    } else {
           $('#selectwebsites > option:selected').removeAttr('selected');
           $('#selectwebsites > option').first().attr('selected', 'selected');
     } });
});
 $(document).ready(function(){    
    $("#prev").click(function() {
        var isFirstElementSelected = $('#selectwebsites > option:selected').index() == 0;

    if (!isFirstElementSelected) {
       $('#selectwebsites > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    } else {
         $('#selectwebsites > option:selected').removeAttr('selected');
         $('#selectwebsites > option').last().attr('selected', 'selected');
    }    
});
});

AND IN THE BODY:

<button type="button" id="prev">Previous</button>
<button type="button" id="next">Next</button>

没有上一个/下一个按钮的页面：

<html>
    <head>
    <script type="text/javascript" src="/static/js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="/static/js/script.js"></script>
        <script>
            $(document).ready(function(){
                 $('select#selectsubcategories').change(function () {
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var subcategory_name   = optionSelected.text();

                     data = {'cnt' : subcategory_name };
                     ajax('/getdetails',data,function(result){

                            console.log(result);
                            $("#selectwebsites option").remove();
                            for (var i = result.length - 1; i >= 0; i--) {
                                $("#selectwebsites").append('<option>'+ result[i].name +'</option>');
                            };   
                         });
                 });
            });


        </script>

    </head>

    <body>
        <select name="selectsubcategories" id="selectsubcategories">
    <option value="" selected="selected">Select Category</option>
    {% for category in categories %}
            <optgroup label="{{ category.name }}">
        {% for item in category.subcategory_set.all %}
            <option val="{{ item.name }}"> {{ item.name }} </option>    
        {% endfor %}
            </optgroup>
    {% endfor %}
        </select>  

        <select name ="selectwebsites" id="selectwebsites" ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value">
       </select>


<iframe name="iframe" id="youriframe" src="http://mywebsite.com" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.></iframe>
</br>

    </body>
</html>

UPDATE ::::: 移动了更改iframe src的调用，并通过选择框和prev-next按钮调用它。

这似乎有用

<html>
    <head>
    <script type="text/javascript" src="/static/js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="/static/js/script.js"></script>
        <script>
            $(document).ready(function(){
                 $('select#selectsubcategories').change(function () {
                     var optionSelected = $(this).find("option:selected");
                     var valueSelected  = optionSelected.val();
                     var subcategory_name   = optionSelected.text();


                     data = {'cnt' : subcategory_name };
                     ajax('/getdetails',data,function(result){

                            console.log(result);
                            $("#selecthiddenwebsites option").remove();
                            for (var i = result.length - 1; i >= 0; i--) {
                                $("#selecthiddenwebsites").append('<option>'+ result[i].name +'</option>');
                            };


                         });
                 });
            });


        </script>
        <script>
            $(document).ready(function(){
$("#next").click(function() {
    var isLastElementSelected = $('#selecthiddenwebsites > option:selected').index() == $('#selecthiddenwebsites > option').length -1;

    if (!isLastElementSelected) {     
        $('#selecthiddenwebsites > option:selected').removeAttr('selected').next('option').attr('selected', 'selected'); 
    } else {
           $('#selecthiddenwebsites > option:selected').removeAttr('selected');
           $('#selecthiddenwebsites > option').first().attr('selected', 'selected'); 
     }   
});
$("#prev").click(function() {
    var isFirstElementSelected = $('#selecthiddenwebsites > option:selected').index() == 0;

    if (!isFirstElementSelected) {
       $('#selecthiddenwebsites > option:selected').removeAttr('selected').prev('option').attr('selected', 'selected');
    } else {
         $('#selecthiddenwebsites > option:selected').removeAttr('selected');
         $('#selecthiddenwebsites > option').last().attr('selected', 'selected'); 
    }

});
});
        </script>
<script>
function newSrc() {
  var e = document.getElementById("selecthiddenwebsites");
  var newSrc = e.options[e.selectedIndex].value;
  document.getElementById("frame").src=newSrc;
}
        </script>

    </head>

    <body>
        <select name="selectsubcategories" id="selectsubcategories">
    <option value="" selected="selected">Select Category</option>
    {% for category in categories %}
            <optgroup label="{{ category.name }}">
        {% for item in category.subcategory_set.all %}
            <option val="{{ item.name }}"> {{ item.name }} </option>    
        {% endfor %}
            </optgroup>
    {% endfor %}
        </select>  
<button type="button" id="prev" ONCLICK="newSrc();">Previous</button>
        <select name ="selecthiddenwebsites" id="selecthiddenwebsites" ONCHANGE="newSrc();">
       </select>
<button type="button" id="next" ONCLICK="newSrc();">Next</button>
    <br />
<iframe name="iframe" id="frame" src="/browserpage/" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.></iframe>
</br>

    </body>
</html>

Javascript next prev按钮

0 个答案: