logo
down
shadow

Display a different div based on the combination of two different options


Display a different div based on the combination of two different options

By : TobiasBackstrom
Date : November 22 2020, 10:54 AM
I wish this help you Answer & Demo
If I understood correctly you want to display a different iframe url for each radio combination. So that's what I did in this JSFiddle, although abstracted and with less, much less content (you should be able to expand on it).
code :
<form>
    <h1>Gender:</h1>
    <input type="radio" name="gender" value="boys" checked/>Boys<br/>
    <input type="radio" name="gender" value="girls"/>Girls<br/>
    <h1>Grades:</h1>
    <input type="radio" name="grade" value="1" checked/>1st Grade<br/>
    <input type="radio" name="grade" value="2" />2nd Grade<br/>
    <input type="radio" name="grade" value="3" />3rd Grade<br/>
</form>
<br>
<div>
    <iframe id="iframe"></iframe>
</div>
window.onload = init;
function init(){
    iframe = document.querySelector("#iframe");
    radios = document.querySelectorAll("input[type=radio]");
    for( var i = 0 ; i < radios.length ; i ++ ){
        var radio = radios[i];
        radio.onchange = updateIframeSrc;
    }
    updateIframeSrc();   
}

function updateIframeSrc(){
    var gender = document.querySelector("input[name=gender]:checked").value;
    var grade = document.querySelector("input[name=grade]:checked").value;
    var url;
    switch(gender){
        case "boys":
            switch(grade){
                case "1":
                    url = "http://www.boysgrade1.com";
                    break;
                case "2":
                    url = "http://www.boysgrade2.com";
                    break;
                case "3":
                    url = "http://www.boysgrade3.com";
                    break;
            }
            break;
        case "girls":
            switch(grade){
                case "1":
                    url = "http://www.girlsgrade1.com";
                    break;
                case "2":
                    url = "http://www.girlsgrade2.com";
                    break;
                case "3":
                    url = "http://www.girlsgrade3.com";
                    break;
            }
            break;
    }
    iframe.src = url;
}
switch(gender){
    (..)
    case "girls":
        switch(grade){
            (..)
            case "graduated":
                url = "http://graduatedstudents.com";
                break;
        }
        break;
}
<input type="radio" name="grade" value="graduated" />Graduated Student<br/>


Share : facebook icon twitter icon
display select options based on previous selections

display select options based on previous selections


By : Hasti
Date : March 29 2020, 07:55 AM
wish of those help You've posted jQuery code. E.g.: $('#menu1')
So be sure to call the jQuery library in a script tag, and place all such code inside a jQuery block like this:
code :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type = "text/javascript">
    $(function () { 

        var data = {
            "category":["sub-category"],
            "music": ["sub-category","rock", "punk"],
            "film": ["sub-categoy","comedy", "drama"],
            "tv": ["sub-catery","sit-com", "soap opera"],
        };


        $.each(data, function(key, value){            

            $('#menu1').append($('<option />').text(key));
        });


        $('#menu1').change(function() {
            var key = $(this).val();
            $('#menu2').empty();
            for (var i in data[key]) {
                $('#menu2').append('<option>' + data[key][i] + '</option>');
            }
        }).trigger('change');

</script>
Display HTML options based on separately selected options with Angular

Display HTML options based on separately selected options with Angular


By : user3048435
Date : March 29 2020, 07:55 AM
this one helps. Use ng-options for this: https://docs.angularjs.org/api/ng/directive/select
You need to set your selected brand as an object, then use that brand to repeat over your ranges in your next ng-options select.
code :
   <div>
        <select name="currentBrand" ng-model="currentBrand"
                ng-options="brandOption as brandOption.brandName for brandOption in brandOptions">
                <option value="" disabled>Select a brand</option>
            </select>
        </div>

        <span>Selected brand: {{currentBrand}}</span>
        <div>
            <select name="currentRange" ng-model="currentRange"
            ng-options="rangeOption for rangeOption in currentBrand.ranges">
                <option value="" disabled>Select a range</option>
            </select>
        </div>

        <span>Selected Range: {{currentRange}}</span>
    </div>
Display a list of options that changes based upon conditions, and have user select one of those options

Display a list of options that changes based upon conditions, and have user select one of those options


By : Sacha Vannattan
Date : March 29 2020, 07:55 AM
will be helpful for those in need You could construct a list of pairs where first item is the text to display and second item is a function to execute if option is selected. Then you would have to code the functionality to decide the options only once and executing selected option would be trivial.
Here's an example on how the game could look with above approach:
code :
class Bottle(object):
    def __init__(self,name,capacity,amount):
        self.name = name
        self.capacity = capacity
        self.amount = amount

    def fill(self):
        self.amount = self.capacity

    def empty(self):
        self.amount = 0

    def fill_from(self, bottle):
        amount = min(self.capacity - self.amount, bottle.amount)
        self.amount += amount
        bottle.amount -= amount

# Add all the possible options for given bottle to the list
def add_bottle_options(options, bottle, other):
    # Fill
    if bottle.amount != bottle.capacity:
        options.append(('Fill {}'.format(bottle.name), lambda: bottle.fill()))

    # Empty
    if bottle.amount:
        options.append(('Empty {}'.format(bottle.name), lambda: bottle.empty()))

    # Pour to
    if bottle.amount != bottle.capacity and other.amount:
        text = 'Pour water in {} into {}'.format(other.name, bottle.name)
        options.append((text, lambda: bottle.fill_from(other)))


bottle_a = Bottle("Bottle A", 5, 0)  # 5 gallon bottle
bottle_b = Bottle("Bottle B", 3, 0)  # 3 gallon bottle
ticking = True

def defuse():
    global ticking
    ticking = False

while ticking:
    print('Bottle A Amount: {}, capacity: {}'.format(bottle_a.amount,
                                                     bottle_a.capacity))
    print('Bottle B Amount: {}, capacity: {}'.format(bottle_b.amount,
                                                     bottle_b.capacity))

    print("Your options are as follows:")

    # List of option text, function to execute tuples
    available_options = []
    add_bottle_options(available_options, bottle_a, bottle_b)
    add_bottle_options(available_options, bottle_b, bottle_a)

    if bottle_a.amount == 4 or bottle_b.amount == 4:
        available_options.append(('Defuse bomb', defuse))

    # Enumerate will return (number, item) tuples where the number starts
    # from second parameter. Since items are (name, function) 
    # tuples themselves enumerate returns (number, (name, function))
    # tuples which we need to unpack so that we can use number and name
    # for printing. (s, _) does nested unpacking so that name goes to
    # variable s and function to _ which is a common name for throwaway data.
    for i, (s, _) in enumerate(available_options, 1):
        print('[{}] {}'.format(i, s))

    try:
        # Ask user choice, convert it to int, subtract 1 since displayed
        # options use 1-based indexing and execute the selected option
        choice = input('Select option: ')
        available_options[int(choice) - 1][1]()
    except:
        print('Invalid option')

print('Congrats, you defused bomb')
How do I display menu options based on access level?

How do I display menu options based on access level?


By : Derek Kifer
Date : March 29 2020, 07:55 AM
should help you out I have done something like this. I have created Role & UserRole Table.
code :
CREATE TABLE [dbo].[Role](
    [RoleID] [nvarchar](10) NOT NULL,
    [RoleName] [nvarchar](50) NOT NULL,
    [Memo] [nvarchar](50) NOT NULL,
 CONSTRAINT [PK_SYS_Role] PRIMARY KEY NONCLUSTERED 
(
    [RoleID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
CREATE TABLE [dbo].[UserRole](
    [UserRoleID] [nvarchar](10) NOT NULL,
    [UserID] [nvarchar](10) NOT NULL,
    [RoleID] [nvarchar](10) NOT NULL,
 CONSTRAINT [PK_UserRole] PRIMARY KEY CLUSTERED 
(
    [UserRoleID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[UserRole]  WITH CHECK ADD  CONSTRAINT [FK_UserRole_REF_Role] FOREIGN KEY([RoleID])
REFERENCES [dbo].[Role] ([RoleID])
GO

ALTER TABLE [dbo].[UserRole] CHECK CONSTRAINT [FK_UserRole_REF_Role]
GO

ALTER TABLE [dbo].[UserRole]  WITH CHECK ADD  CONSTRAINT [FK_UserRole_REF_USER] FOREIGN KEY([UserID])
REFERENCES [dbo].[User] ([UserID])
GO

ALTER TABLE [dbo].[UserRole] CHECK CONSTRAINT [FK_UserRole_REF_USER]
GO
Display result in graph based on combination of year and month selection in laravel

Display result in graph based on combination of year and month selection in laravel


By : user3686436
Date : March 29 2020, 07:55 AM
With these it helps First, use %Y-%m instead of %y-%m;
Secondly, you are rewrite your field's name, so group by will not using the name that has been rewritten, you need to specify DB::raw('DATE_FORMAT(deliver_date,"%Y-%m")
code :
$data=$req->all();

$results = DB::table('orders')
                ->select(DB::raw('DATE_FORMAT(deliver_date,"%Y-%m") as delivery_date'),DB::raw('SUM(orders_qty) as sum_of_qty'))
                         ->whereBetween(DB::raw('DATE_FORMAT(deliver_date,"%Y-%m")'), [$data['start_year_month'],$data['end_year_month']])
                         ->groupBy(DB::raw('DATE_FORMAT(deliver_date,"%Y-%m")'))
                         ->get();
Related Posts Related Posts :
  • clearvalidators not working in angular 6 form control
  • Remove Count Attribute in json data
  • queue up function callbacks
  • How to stop all Soundcloud streams in once?
  • Sliding div onclick left/right
  • RequireJS JQuery shim doesnt work with VS2013
  • What is the Meteor concurrency model?
  • Events on children of contenteditable element
  • Simple jquery not working to print the input value
  • Javascript templating language in reverse
  • Making Pagination in Javascript Scalable (for large # of db results)
  • Performance of Stateless Authentication in SPA and SSO (Single Sign On)
  • Assigning a value for view asynchronously
  • Mocha JS: How to reuse assertions within a spec?
  • Is ember.js stable enough to use in a real world project?
  • jQuery Load() not loading within div
  • encode stream from webCam h264
  • Regex to find pattern, return subpattern
  • Why does this regex to remove empty <p></p> tags from a string fail?
  • Rails: pass data to javascript
  • Quickest way to check if a number is in a set?
  • Phonegap events online/offline not working
  • In HTML5, please explain the meaning of '?' in the statement
  • Form to use AJAX rather than a page refresh but also utilise error handling?
  • JQuery Script looping error
  • different size divs align top left
  • Image fade-in when webpage finishes loading
  • Seeking HTML5 audio element causes delay (breaks sync)
  • How can I read & write data to a new tab in Firefox?
  • jQuery or JS turn all words into italic type
  • iOS css -webkit-transform: scale doesn't offset touch events
  • Populate select list using javascript
  • Can you work out why my .js file doesn't seem to be linking to my html?
  • Make slideToggle effect only one element at a time
  • Output sound using JavaScript
  • What is the analytics.js equivalent of _trackPageview found in ga.js
  • How can I check if a JS file has been included already?
  • hasClass and condition not working
  • EDITED: I'm having issues with a button and its function
  • Importing XML in HTML with javascript
  • Create new function in contentScriptFile in Firefox extension
  • Should I build Node.js from source or download the OS X installer?
  • How to enforce integer sizes in JS? (TypeScript?)
  • How to update the JSON object without deleting old values using javascript
  • Reading a javascript variable containing a string into another file
  • Possible to prevent 403 errors from logging to the web console?
  • Jquery Accordion - Expand and collapse div on hover
  • jquery .hide() function - Hide mobile, Display Desktop
  • Holding password in javascript variable - security implications?
  • JQPlot trouble to render vertical stacked bar and horizontal legend
  • counts days inbetween then add class to those days with nested divs?
  • Marionette.js with Rails (Devise) Authentication
  • javascript anonymous function evaluation idiom
  • Why am I losing the decimal when working this equation in Javascript?
  • Site redirects to index.php after being open while making calls to an API using AJAX
  • How to determine when multiple callbacks are all done
  • How to update Yeoman dependencies?
  • How can I do a /resolve with the Soundcloud Javascript SDK?
  • I'm not able to call a named callback function
  • How to get value of Paragraph element contained in <div> in HTML using JavaScript
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org