Extract text from a div

Question

I am trying to make a DropDownList using divs and jquery (so that I can style it as I want)...and its working but the problem is I cant get the selected value from the list..

After selection of the option I am copying the selected value into the a div.. and I want to extract this using c# (in .aspx.cs page)... I've tried to do it using string builder and innerHtml(after adding runat="server" to the div).. but it doesn't work ...code is as follows

.aspx Page:

<div class="ddl">
    <div id="lowertriangle" class="lowertriangle"></div>
    <div id="uppertriangle" class="uppertriangle"></div>
    <div id="label" class="labeldiv_dd" runat="server"></div>//***This is the div from which I want to extract value***
    <div id="options" class="optionsidv_dd">
        <ul id="options_ul">
            <li id="0">Select One Option</li>
            <li id="1">Option 1</li>
            <li id="2">Option 2</li>
            <li id="3">Option 3</li>
            <li id="4">Option 4</li>
            <li id="5">Option 5</li>
        </ul>
    </div>
</div>

aspx.cs page

Method 1 that I tried:

string sel_text = label.InnerHtml;
display_sel_value.Text = sel_text.ToString();

2nd method:

var sb = new StringBuilder();
label.RenderControl(new HtmlTextWriter(new StringWriter(sb)));

string s = sb.ToString();

Kindly point out my mistakes and help me in this regard(in extracting innerHTML of the div that is). Thanks

The problem is your not using a select. So there is nothing [POST](http://en.wikipedia.org/wiki/POST_(HTTP))ed to the server. Why are you trying to use a UL as a select? For style? — Liam, Oct 03 '13 at 12:36
As @Liam pointed out, you need to send the data back to the server. You can do so either by having it in a form element (one example a hidden input) and submitting (posting) the form, or you can use client script requests (jQuery ajax calls) to send the data. — PHeiberg, Oct 03 '13 at 12:40
@SpYk3HH, even if he uses jQuery how can he handle the selecting of the element. There is a fundamental flaw to this entire approach I feel. — Liam, Oct 03 '13 at 12:45
Getting into an argument on the merits of ASP.Net doesn't answer this question. — Liam, Oct 03 '13 at 12:46
@Liam if it were me, I'd right a short widget making my *ul menu* into a *ui-widget* menu with drop down, selection, and ajax posting all tied together in the widget call. Then I'd have one simple place to make adjustments as needed and probably only have the ajax post back a final *selection*, if that's really necessary, tho if we knew more about the project, I'm sure it's not. — SpYk3HH, Oct 03 '13 at 12:48
[Why does ASP.NET webforms need the Runat=“Server” attribute?](http://stackoverflow.com/questions/304290/why-does-asp-net-webforms-need-the-runat-server-attribute) — SpYk3HH, Oct 03 '13 at 12:50
The other issue here is the issue of "**selection**". I don't see anywhere in this code where `li` is being "*selected*". Via ASP or jQuery? Or even an `a` tag!? — SpYk3HH, Oct 03 '13 at 12:54
Solutions aside, I'm more and more convinced that this is the dreaded XY problem. The OP's _real_ issue is that they want to make the dropdown list look the way they want, and they believe it's impossible with a `` to look like? — Mr Lister, Oct 03 '13 at 13:09
@SpYk3HH I didnt add the selection code cuz i didnt think it was necessary...its being done using jQuery — Arawn, Oct 04 '13 at 10:08

score 2 · Accepted Answer · answered Oct 03 '13 at 13:00

No, putting content in a div won't work.

Your example isn't complete enough to see all that happens, but let's assume that you're in a standard <form>, you're setting the div's inner HTML to a value with Javascript and then you're submitting in the standard way.

Then one way to do what you want is to use a hidden input and setting its value attribute instead of its contents.

<input id="label" class="labeldiv_dd" runat="server" type="hidden">

In the codebehind, the C# can retrieve the value from this control after submitting with the .Value property.

score 0 · Answer 2 · answered Oct 04 '13 at 10:13

Ok guys thx for your replies..I found a way around the problem...I used HiddenField control to store the selected value using jQuery like so

$("#options_ul li").click(function () {
            var text = this.innerHTML;
            ***$('#<%= selectedvalue.ClientID %>').val(text);***
            $("#options_ul li").css("background-color", "#c2c2c2");
            $(this).css("background-color", "white");
            //var prev = this.id;
            //document.getElementById("label").innerHTML = text;
            toggleHeight();
        });

and then accessed it server side using

selectedvalue.value;

PS: "selectedvalue" is id of the hiddenfield control

Extract text from a div

2 Answers2