How to merege two javacript into one and bind that cssclass to drodpwnlist

Question

User-807418713 posted

Hello

I want to bind two javacript to one dropownlist cssclass here is my two javascript

how to make this one

<script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen({
                search_contains: true                
             });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $(".chzn-select").chosen({
                search_contains: true                
             });
            }
        });
    </script>
    
    <script>
        $(function () {
            $(".mytext").val($(".myddl").val())
            $(".myddl").change(function () {
                $(".mytext").val($(this).val())

            })


        })
    </script>

thanks

Answer 1

User839733648 posted

Hi Gopi.MCA,

According to your description and code, I'm sorry that I'm not clear about your requirment.

I want to bind two javacript to one dropownlist cssclass here is my two javascript

Do you mean that you want to add the change function and the chosen plugin function to one dropdownlist?

If so, I would like to ask what is your requirment? How is the dropdownlist you want to designed?

Best Regards,

Jenifer

Answer 2

User-807418713 posted
Hello

This two script I want to bind one dropdownlist.

How to do si

Answer 3

User475983607 posted

Hello

This two script I want to bind one dropdownlist.

How to do si

My best guess is you are trying to get the chosen selected value.  Please see the chosen documentation 

https://harvesthq.github.io/chosen/

If my guess is incorrect, then please show the markup and explain at a high level the problem you are trying to solve.

Answer 4

User-807418713 posted

Hello 

This is my script

<script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen({
                search_contains: true                
             });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $(".chzn-select").chosen({
                search_contains: true                
             });
            }
        });
    </script>
    
    <script>
        $(function () {
            $(".mytext").val($(".myddl").val())
            $(".myddl").change(function () {
                $(".mytext").val($(this).val())

            })


        })
    </script>

This is my dropdownlist code

                <asp:DropDownList ID="DropDownList3" runat="server"  DataTextField="Item_Name" TabIndex="14" Width="302px"
                         class="chzn-select" Class="myddl" Font-Names="Palatino Linotype" AppendDataBoundItems="True" DataValueField="Price">
                            <asp:ListItem Selected="True">Select Item Name</asp:ListItem>
                        </asp:DropDownList>

How to bind the both script chzn-select & myddl  to  my dropdownlist

I'm getting this error

Parser Error Message: The tag contains duplicate 'Class' attributes.

Answer 5

User839733648 posted

Hi Gopi.MCA,

How to bind the both script chzn-select & myddl  to  my dropdownlist

You could use ID Selector instead of adding two classes to bind the two methods to your dropdownlist like below.

<script type="text/javascript">
  $(function () {
    $(".chzn-select").chosen({
        search_contains: true                
    });
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  function EndRequestHandler(sender, args) {
     //Binding Code Again
     $("#DropDownList3").chosen({
         search_contains: true                
     });
   }
  $(".mytext").val($(".myddl").val())
  $("#DropDownList3").change(function () {
     $(".mytext").val($(this).val())
  })
});
</script>

Best Regards,

Jenifer

Answer 6

User-807418713 posted

Hello

Good Day

This code once dropdownlist select textbox not binding value why..?

 <script type="text/javascript">
  $(function () {
    $("#ctl00_ContentPlaceHolder1_DropDownList3").chosen({
        search_contains: true                
    });
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
  function EndRequestHandler(sender, args) {
     //Binding Code Again
     $("#ctl00_ContentPlaceHolder1_DropDownList3").chosen({
         search_contains: true                
     });
   }
  $("#ctl00_ContentPlaceHolder1_TextBox9").val($("#ctl00_ContentPlaceHolder1_DropDownList3").val())
  $("#ctl00_ContentPlaceHolder1_DropDownList3").change(function () {
     $("#ctl00_ContentPlaceHolder1_TextBox9").val($(this).val())
  })
});
</script>

Thanks

Answer 7

User839733648 posted

Hi Gopi.MCA,

It seems that you are using Master Page and I've tried your code on myside and it works well on my side.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:DropDownList ID="DropDownList3" runat="server" DataTextField="Item_Name" TabIndex="14" Width="302px"
        class="myddl" Font-Names="Palatino Linotype" AppendDataBoundItems="True" DataValueField="Price">
        <asp:ListItem Selected="True">Select Item Name</asp:ListItem>
        <asp:ListItem>11111</asp:ListItem>
        <asp:ListItem>22222</asp:ListItem>
    </asp:DropDownList>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#MainContent_DropDownList3").chosen({
                search_contains: true
            });
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
            function EndRequestHandler(sender, args) {
                //Binding Code Again
                $("#MainContent_DropDownList3").chosen({
                    search_contains: true
                });
            }
            $("#MainContent_TextBox1").val($("#MainContent_DropDownList3").val());
            $("#MainContent_DropDownList3").change(function () {
                $("#MainContent_TextBox1").val($(this).val())
            })
        });
    </script>
</asp:Content>

result:

You may try to add the script below your div in your asp:content.

I suggest that you could use F12 developer tools to check whether the function is called.

Best Regards,

Jenifer