Javascript下一个上一个按钮_Javascript_Jquery

Javascript下一个上一个按钮

javascript jquery

Javascript下一个上一个按钮,javascript,jquery,Javascript,Jquery,我在底部有一个简单的页面，它有两个独立的选择框。在第一个类别中选择类别后，第二个类别将填充站点。我可以从第二个选择框中选择站点，这将更新iframe src 我的问题是，如何让上一个/下一个按钮触发ONCHANGE或ONCLICK 例如： ONCHANGE="document.getElementById('youriframe').src = this.options[this.selectedIndex].value" 我想下面的代码片段就可以了，但我无法让它发挥作用 $(docume

我在底部有一个简单的页面，它有两个独立的选择框。在第一个类别中选择类别后，第二个类别将填充站点。我可以从第二个选择框中选择站点，这将更新iframe src

我的问题是，如何让上一个/下一个按钮触发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>

更新: 移动了更改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>

这里到底有什么不起作用？您是否在单击处理程序中设置了断点以查看它是否正在触发？另外，您不需要使用document.ready两次。只需将所有事件处理和其他jquery代码放在一个document.ready块中即可。我认为错误的是，prev和next按钮没有正确的指示，用于更改列表，就我所知，我认为最好将onclick和onchange指令作为单独的项移动到选择框中，然后从按钮和选择框调用它。我想你在这里也说了同样的话