单击链接以显示下拉列表

Question

I just want to display a link "Free Chat" when I click on the link. It must display a dropdown with the options "yes" and "no" .

The link must not go anywhere yet, only when "yes" is selected it must redirect to a page.

I currently have the code:

<a href="" id="link" name="link" onClick="yesnolist(1)">Free Chat</a>

and my Javascript:

<script type="text/JavaScript">
  function yesnolist()
  {
     var e = document.getElementById("link");
     var strUser1 = e.options[e.selectedIndex].value;
     if (strUser1 == "1")
        window.location.href = "http://.........";

     return strUser1;
  }
 </script>

Answer 1

I'm not sure I understand your question perfectly.

I assume that you have said link:

<a href="" id="link" name="link" onClick="yesnolist(1)">Free Chat</a>

Now, when someone clicks, you want it to create a dropdown? I'm not sure if you mean a dropdown right next to the anchor element or replace the anchor element with the dropdown.

I would recommend, at any moment, using jQuery for javascript, but since it seems you're not using it:

<a href="#yesno" id="link" name="link">Free Chat</a>
<select id="yesno_id" name="yesno" style="display:none;">
    <option value="1">Yes</option>
    <option value="2">No</option>
</select>

We won't display the dropdown yet, even when it's already there. Now we add a listener to #link and to #yesno_id (notice that the following code either goes right before the tag or should be placed inside an body onload listener).

<script type="text/javascript">
document.getElementById('link').addEventListener('click', function() {
    var yesno = document.getElementById('yesno_id');
    yesno.style.display = 'block';
    yesno.addEventListener('change', function() {
        if (this.value === '1') {
            window.location.href = "http://.........";
        }
        else {
            this.style.display = 'none';
        }
    }, true);

}, true);
</script>

I didn't test it at all and will most likely have errors (I didn't even write it on an editor), but it should give you the general idea.

Here we're using unobtrusive javascript: we don't add any reference to JavaScript on the HTML. We simply have id's and classes, like any HTML with no JS would do. Then we access the HTML elements using JavaScript apart from all that and we bind the click and change event handlers (correspondingly to each element).

If the person clicks on the link and then selects No, it will hide the dropdown, if it says yes it will redirect to the url you said. It would be nice to actually have the link on the anchor's href and cancel the event propagation. Then grab the href from the yesno_id event handler and redirect to that. That way, if JS is disabled, it would directly take you to the page (although it wouldn't "confirm").

Answer 2

actually i dont know what you want to do..but try below code for your task.

<a href="" id="link" name="link" onClick="yesnolist()">Free Chat</a>


<script type="text/JavaScript">
  function yesnolist()
  {
     var e = confirm('are you want to sure...?');

     if (e == ture)
        window.location.href = "http://.........";
      else
        return false;

    }
 </script>

This may helpful for you..

Thanks.

Answer 3

I found this JQuery plugin the other day which I believe will do exactly what you want:

http://thrivingkings.com/apprise/

See the examples on the page for how to do a 'yes/no' box.

Answer 4

Blockquote inintial loading page hide the that div

when click on the div show with delay 1000

Blockquote

u ll get like a drop down visiual