Make button appear after list selection

Question

I need the button "Details" to appear only after I am selecting: UK (from first list) -> Controlling (from second list), else stay hidden.

The HTML code is:

<div id="section2_table" class="section2_class">
    <div id="systemID"></div>
    <div id="countryID"></div>
    <div id="departmentID"></div>
    <div id="areaID"></div>
    <div id="jobRoleID"></div>
    <div id="ReleaseStrategy"></div>
    <div id="Details2"><span>Cateva detalii aici</span></div>
    <div id="popUpDetails"><a href="#">DETAILS</a></div>
</div>

and the script:

$(function() {
  $("#departmentID").change(function() {
    if ($("#departmentID").is(":selected")) {
        $("#popUpDetails").show();
    } else {
        $("#popUpDetails").hide();
    }
  }).trigger('change');
});

Unfortunately it doesn't work... Any suggestion would be highly appreciated.

A div element does not trigger a 'change' event, so, you can not listen for this event on a div element. Instead, use a select element — kapantzak, Mar 09 '16 at 15:37
$("#departmentID").hasAttr("selected") Check THis .. its cool ... (http://stackoverflow.com/questions/1318076/jquery-hasattr-checking-to-see-if-there-is-an-attribute-on-an-element) — DAre G, Mar 09 '16 at 15:51
something like this: $(document).ready(function() { if($("#departmentID").hasAttr("selected")) { $("#popUpDetails").show(); } else { ("#popUpDetails").hide(); } }); ??? — Bobita, Mar 09 '16 at 15:58

JF it · Answer 1 · 2016-03-10T10:17:25.220

0

I have made a jsfiddle here: https://jsfiddle.net/2r294dsq/

Because you have not provided pretty much any structure/css to your question i simplified it.

There is no "change" event fired for DIV's as kapantzak stated in the comments - so use a click.

After that you can show your div.

UPDATED

$(function() {
  $("#departmentID").on('change', function() {
        $('#popUpDetails').show();
  }, 'select.DepartmentClass');
});

HTML after departmentid div:

<select class="DepartmentClass" jQuery111009314246867544693="10">

edited Mar 10 '16 at 10:17

answered Mar 09 '16 at 16:07

JF it

2,403
3
20
30

very good workaround but I have lists and I need to select from list 2 items in order to appear the details button. 10x for your answer – Bobita Mar 10 '16 at 07:19
right click - inspect element on the selects in chrome. copy out the generated HTML to your answer. thats the reason people cant help you - your question doesnt have any mentions of selects in the html. – JF it Mar 10 '16 at 09:08
with inspect I have the next line of code: – Bobita Mar 10 '16 at 09:30
It doesnt work because its dynamically created - ill update my answer. – JF it Mar 10 '16 at 10:15

score 0 · Answer 2 · answered Mar 09 '16 at 16:30

I figured out something like:

$(function () {
  $('#section2_table').selectable();
  
  
  $("#firstList").change(function() {
    if (this.selectedOptions[0].value == 'UK') {
      $("#popUpDetails").show();
    } else {
      $("#popUpDetails").hide();
    }
  }).trigger('change');

});

#section2_table .ui-selecting { background: #FECA40; }
#section2_table .ui-selected { background: #F39814; color: white; }
#section2_table { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#section2_table div { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; border: double;}

<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

First List: <select id="firstList">
    <option value="DE">DE</option>
    <option value="UK">UK</option>
    <option value="US">US</option>
</select>
<div id="section2_table" class="section2_class">
    <div id="systemID">1</div>
    <div id="countryID">2</div>
    <div id="departmentID">3</div>
    <div id="areaID">4</div>
    <div id="jobRoleID">5</div>
    <div id="ReleaseStrategy">6</div>
    <div id="Details2"><span>Cateva detalii aici</span></div>
    <div id="popUpDetails"><a href="#">DETAILS</a></div>
</div>

DAre G · Answer 3 · 2016-03-10T01:13:48.687

-1

$(function() {
 $('#selectList').change(function() 
  {
if ($('#selectList').hasAttr('selected')) 
 {
  $('#popUpDetails').show();
   } 
   else 
   {
    $('#popUpDetails'").hide();
   }
 }).trigger('change');
});

selectList being the id of the dropdown

edited Mar 10 '16 at 01:13

answered Mar 09 '16 at 16:01

DAre G

177
10

there is a select list right.inside the div with id 'countryid' which selects a country(where @Bobita selects UK) – DAre G Mar 09 '16 at 16:10
thats not obvious from the question whatsoever. How do you know that? – JF it Mar 09 '16 at 16:15
@JF it .He did say "I need the button "Details" to appear only after I am selecting: UK (from first list) -> Controlling (from second list), else stay hidden." Thats what i thought .In that case isnt the code ok.Anyways if your code works and the person asking the question is satisfied ... Ends well – DAre G Mar 09 '16 at 16:19
Alright, i get what you mean, very misleading from OP though. best of luck with it – JF it Mar 09 '16 at 16:21
@DAreG you are right.. inside divs are lists. I want the button Details to appear only after I select, from first list, UK and, from the second list, Controlling. – Bobita Mar 10 '16 at 07:16
and I want to mention one more thing... the list are made in SharePoint – Bobita Mar 10 '16 at 07:20
i am not well versed with share point but my code works in MVC if inside the div there is a – DAre G Mar 10 '16 at 07:59
yes I tried.. doesn't work :(... maybe I am doing something wrong. Thank you very much for your attempt. – Bobita Mar 10 '16 at 08:06
the lists inside the div are generated from a SharePoint List document – Bobita Mar 10 '16 at 08:22
SO you can't specify the – DAre G Mar 10 '16 at 08:25
exactly... can't specify a – Bobita Mar 10 '16 at 08:41

Make button appear after list selection

3 Answers3